CSS

Tasarımınıza Renk Katacak Harika CSS Kodları

Tasarımınıza Renk Katacak Harika CSS Kodları

Merhaba değerli arkadaşlar, bu yazımızda sitenizde kullanıcılar için hem kullanışlı hem de güzel görünmesini sağlayacak harika CSS kodları paylaştık.

p.test {
    word-break: break-all;
}

yukarıdaki CSS kodu ile yazılarınızda kesme işareti kullanarak ziyaretçilerinize daha okunaklı hale getirmenizi sağlar. (https://www.w3schools.com/cssref/css3_pr_word-break.asp)


/* HEPSİ BÜYÜK */ 
p.uppercase {
    text-transform: uppercase;
}
/*hepsi küçük */
p.lowercase {
    text-transform: lowercase;
}
/*Baş Harfleri Büyük */
p.capitalize {
    text-transform: capitalize;
} 

yukarıdaki CSS kodu ile yazıların uppercase ile yazının tamamını büyük harf haline getirir. lowercase ile yazıların tamamını küçük harf haline getirir. capitalize ile yazılarınızın baş harflerini büyük hale getirir. (https://www.w3schools.com/cssref/pr_text_text-transform.asp)


div {
    column-count: 2;
    column-gap: 40px;
    column-rule: 4px outset #ff00ff;
}

yukarıdaki CSS kodu ile yazılarınızın column-count ile 2 ve üstü sütunlardan oluşmasını sağlamaktadır. column-gap ile sütunlar arası boşluğu px, em, rem, vh, vw, vmax, vmin gibi ölçü birimlerini kullanarak ayarlayabilirsiniz. column-rule ile sütunlar arasına renkli çizgi stilleri ekleyebilirsiniz. (https://www.w3schools.com/cssref/css3_pr_columns.asp)


.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: DodgerBlue;
}
.flex-container>div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}

yukarıdan CSS kodu ile bir kutunun için objeyi ortalar ver ayrıca her ölçü bu durumu sağlamaktadır. (https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_perfect_center)


p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

yukarıdaki CSS kodu first-letter ile paragrafın baş harfini büyük veya istediğiniz boyutlarda değişiklik yapabilirsiniz. first-line ile paragrafın ile satırında değişiklik yapabilirsiniz. (https://www.w3schools.com/css/tryit.asp?filename=trycss_firstline_letter)


.cover {
    object-fit: cover;
}

yukarıdaki CSS kodu ile resimlere  kolaylıkla responsive yani her cihazda uyumluluğunu sağlayabilirsiniz. tabi burada bir yükseklik ve genişlik belirmesi gerekir ama şu hariç width:100%; height:100%; gibi değerler vermemelidir. (https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all)


.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}
.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 2px solid red;
    box-sizing: border-box;
}

yukarıdaki CSS kodu ile her iki kutunun genişliği aynı ama kenar kalınlıkları farklı olduğu için burada oluşacak bir şekil biçimsizliği meydana gelmektedir. bunu önlemek amacıyla box-sizing:border-box; yapısını kullandığımızda kenarlarda içe doğru bir kalınlık söz konusu olacaktır. bu da size görsel açıdan bir verimlilik katmış olur. (https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-sizing_new)


<ul class="sb-p">
    <li>
      <a href="#"><h4>Yazılımcı olmak için nereden başlamalıyım?</h4></a> 
    </li>
    <li>
      <a href="#"><h4>PHP ile belli bir döngüde işlem yaptırma</h4></a>
    </li>
    <li>
      <a href="#"><h4>PHP ile site içi arama sonuçlarını filtreleme</h4></a>
    </li>
    <li>
      <a href="#"><h4>Sosyal Medyasız Olmaz</h4></a>
    </li>
</ul>
.sb-p{
  counter-reset:sayac;
}
.sb-p li {
  /*counter-increment: newscounter 0; başlangıç sayısını belirler*/
}
.sb-p li::before{
    content: counter(sayac);
    counter-increment: sayac; /* buraya yazarsanız kaçar kaçar artacağını belirlersiniz.*/
}

Yukarıdaki CSS kodu ile Yazılarınızın başına veya sonuna sıralama numarası ekleyerek tasarımlar daha kullanışlı hale getirin. counter-reset ile sıralama sayısını tekrar baştan başlamasını sağlar. counter-increment ile content: counter() olmayan kısma yazıldığında sayının başlangıç sayını verir örneğin siz 5 yazdığınızda sayı 6’dan başlayacaktır, diğeri ise content: counter(sayac) içine yazdığımızda ise sayının kaçar kaçar artacağını belirler. (https://www.w3schools.com/css/tryit.asp?filename=trycss_counters1)

counter(); ile ilgili örnekler;

See the Pen RwrRggR by genç yazılımcı (@gencyazilimci) on CodePen.

Arkadaşlar yazımızda hata veya önerileriniz olursa lütfen yorum yapmayı unutmayın.

Unutmayın! Paylaşmak; kazanmanın en hızlı ve kolay yoludur. Bir sonraki blog’ta görüşmek dileğiyle esen kalın.

Bu makale yardımcı oldu mu?
EvetHayır

Paylaş

Bir Cevap Yazın