Nasıl Yapılır
Arka plan resim kullanmak için:
Başta dediğim gibi background-clip ve text-fill-color sistemlerini kullanacağız ,bunun için normal css kodlarını yazıp uygulamadaki gibi kodlarımızı ekliyoruz.
.yazı-arkaplan{
background: url('http://www.berkeguler.com/wp-content/uploads/2014/09/2806417207_d7b0e61fa5.jpg') 21% 21%;
-webkit-text-fill-color: rgba(255,255,255,0.25);
-webkit-background-clip: text;
font-Weight:bold;
font-size: 55px;
}
Son olarak Html kodlarımızı çağırıyoruz
berkeguler.com
önizleme: http://jsfiddle.net/berkegulercom/cjz1ncvq/
Arka plan gradient (renk geçişleri) kullanmak için:
Yukarı yaptığımız gibi normal css kodlarımızın yanına ek kodlarımızı yazıyoruz.
.arkaplan-gradint {
background: -webkit-linear-gradient(#000, #777);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-Weight:bold;
font-size: 55px;
}
Yine html ile sonlandırıyoruz.
berkeguler.com
önizleme: http://jsfiddle.net/berkegulercom/pa4tsx8v/1/
Sonuç olarak elimizde böyle bir işlem kalıyor.
İyi çalışmalar