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.