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('http://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.



  • Lucky

    Makaledeki resmi görünce photoshop dersi sanmıştım. Css ile kendimizi aşabileceğimiz bir makale olmuş 😀 Teşekkürler.

  • Her şeyi bir kenara bıraktım, CSS neymiş bize gösteriyorsunuz vallahi.

  • Hocam elinize sağlık , çok beğendim

    *öncelikle editördeki

    1.Örnek : Görsel arka plan
    2.Örnek : Gradient arka plan —-> olmalı

    *birde kodu şöyle düzenlersek

    http://jsbin.com/yanavativiri/1/edit

    Direk HTML çalışacağı için sayfa içinde de kullanılır ve Blogger gibi siteler içinde çalışabilir olur. Umarım bundan sonrakilerde zaman ayırabilip bu şekilde de kod paylaşımı yapabilirsiniz.

    Sitenizi beğeniyorum ,başarılarınızın devamını dilerim.