CSS3 Metnin Arkaplanına Resim ve Gradient Verme
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Metnin Arkaplanına Resim ve Gradient Verme

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2365)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/u66nc.png

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ü :
http://ustaderslik.com/resim/ders/u66p4.png

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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol