CSS ile Yazı Arka Planı : text-fill-color

text-fill-colorCSS3 ile yelpazeye dahil olan text-fill-color ile alışılagelmiş color arasındaki farkları inceleyeceğimiz bir makaleyle devam ediyoruz.

Sol tarafta görmekte olduğunuz gibi bu teknik ile fotoğrafları rahatlıkla metin üzerine yerleştirebiliyoruz. Sadece fotoğrafları değil, gradient (renk geçişleri) de bu teknik ile kullanılabilmekte.

Nasıl hazırlanır?

Yukarıdaki her iki örneği de teker teker inceleyeceğiz. Tasarımları oluşturmak için background-clip ve text-fill-color tekniklerini kullanacağız. İlk olarak her ikisi için de kullanacağımız yazı tiplerini, boyutlarını ve diğer detayları belirtelim.

.resim-bg, .gradint-bg{
width:250px;
margin:30px;
text-align:center;
-webkit-background-clip: text;
font:bold 30px/35px 'Titillium Web', sans-serif;

1. Örnek : Görsel arka plan

CSS Kodları 

.resim-bg{
background: url('https://www.adobewordpress.com/wp-content/uploads/2013/07/Mona_Lisa.jpg') 21% 21%;
-webkit-text-fill-color: rgba(255,255,255,0.25);
-webkit-background-clip: text;
}

HTML Kodları

<p class="resim-bg">adobewordpress.com</p>

2. Örnek : Gradient arka plan

CSS Kodları

.gradint-bg {
background: -webkit-linear-gradient(#222, #666);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

HTML Kodları

<p class="gradint-bg">adobewordpress.com</p>

Kapanış

Bu teknik ile sitenizin başlıklarını şekillendirebilirsiniz. Belki logonuza hareketlilik bile katabilirsiniz. Her şey sizin hayal gücünüze bakmakta.

İyi çalışmalar.