Blog metinlerini sadece CSS tekniklerini uygulayarak renklendirebilirsiniz. Sadece arka plan renğini değil, aynı zamanda geçişi de sağlayabilirsiniz. Metinleri renk geçişi ile görüntülemek için görüntü kullanmanıza gerek yok.
Blog sayfalarının yüklenmesini engeleyecek resimler kullanmak yerine, sadece CSS kodlarından faydalanarak sayfa yüklenmelerini de etkilememiş olacaksınız.
CSS renk geçiş teknikleri, blog başlığı, başlık sonuna veya metinlerden farklı görünecek olan metinlere uygulayabilirsiniz.
Farklı görünmesini istediğiniz başlık metinlerinin renklendirilmesinde kullanabilirsiniz. Renk geçişlerini yayın başlıklarına, h1, h2, h3, h4, h5, h6 etiketlerine veya metinlere uygulayabilirsiniz.
Blog Yazılarını Renk Tonlaması ile Görüntüleme
Aşağıda 3 farklı alaşımlı (Instagram renkleri) renk geçiş tekniklerinden oluşan metin renklendirme CSS kodu bulunmakta. Tabi ki bu renk karışımını ve tonlama açısını zevkinize göre yapabilirsiniz.
Blog metinlerini renklendirmek için aşağıdaki CSS kodunu kullanın. Aşağıdaki CSS kodunu blogunuzun şablon editör sayfasında bulunan CSS kodları arasına ekleyin.
CSS
.gradients-text{
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
}Yukarıdaki CSS kodu içerisinde işaretlenmiş kodları değiştirerek metinlere istediğiniz renk tonlamasını ekleyebilirsiniz.
Yukarıdaki CSS kodlarını ekledikten sonra, renklendirmek istediğiniz metin etiketlerine aşağıdaki kodda olduğu gibi class="gradients-text" kodunu ekleyin.
HTML
<h3 class="gradients-text">Metin Renklendirme</h3>İstediğimiz renk geçişini oluşturmak ve arka planı değiştirmek için buraya tıklayın.
Bu yazımızda Web sitelerinde bulunan metinleri diğer metinlerden ayırt etmek için, sadece CSS kodlarını kullanarak nasıl renklendirildiği ile ilgili bilgiler paylaştık. Bu yayında paylaşılan bilgiler hakkında görüş ve sorularınız için yorumlarınızı bekliyorum.
0 komentar: