CSS3 ün güzel bir özelliklerinden birini anlatacağım.Bu derste texte arkaplan resmi vermeyi göstereceğim.Aslında mantığı basit.
Normal arkaplan veriyoruz.Daha sonra background-clip arkaplanı texte uygula diyip text-fill-color la metnin arkaplanını transparan ediyoruz.
.yazi{background:url(arka.jpg) ;font-size:100px;background-size:100px 100px;font-family:Impact;
background-clip: text;-webkit-background-clip: text;-moz-background-clip: text;-o-background-clip: text;
text-fill-color: transparent;-webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-o-text-fill-color: transparent;
}
Bu şekilde bir arkaplan atadık.webkit-moz-o tarayıcı uyumlulukları için.
Görüntüsü :
Arkaplan için arabalı bir manzara resmi kullandım.
Aynı mantıkla şu şekilde de bir örnek yapılabilir.Arkaplana resim yerine gradient verirsek metine gradientde geçecektir.Bir örnek yapalım.
.yazi{background:linear-gradient(red, blue);background:-webkit-linear-gradient(red, blue) ;background:-moz-linear-gradient(red, blue) ;background:-o-linear-gradient(red, blue) ;font-size:100px;font-family:Impact;
background-clip: text;-webkit-background-clip: text;-moz-background-clip: text;-o-background-clip: text;
text-fill-color: transparent;-webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-o-text-fill-color: transparent;
}
Görüntüsü :
Gördüğünüz gibi basit bir gradient verdik.Daha sonra metne uygula dedik ve sonuç bu oldu.
Genel örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<title>UstaDerslik</title>
<style type="text/css">
.yazi{background:linear-gradient(red, blue);background:-webkit-linear-gradient(red, blue) ;background:-moz-linear-gradient(red, blue) ;background:-o-linear-gradient(red, blue) ;font-size:100px;font-family:Impact;
background-clip: text;-webkit-background-clip: text;-moz-background-clip: text;-o-background-clip: text;
text-fill-color: transparent;-webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-o-text-fill-color: transparent;
}
.yazi2{background:url(http://ustaderslik.com/slider2/arka.jpg) ;font-size:100px;background-size:100px 100px;font-family:Impact;
background-clip: text;-webkit-background-clip: text;-moz-background-clip: text;-o-background-clip: text;
text-fill-color: transparent;-webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-o-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="yazi">cArleone</div>
<div class="yazi2">cArleone</div>
</body>
</html>
UstaDerslik
