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

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

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.

Bir Cevap Yazın