CSS Gölge Etkileri
- Önceki Sayfa CSS Dairesel Geçiş
- Sonraki Sayfa CSS box-shadow
CSS ile gölge etkisi oluşturun!
CSS Gölge Etkileri
CSS kullanarak metin ve öğelere gölge ekleyebilirsiniz.
Bu eğitimimizde aşağıdaki özellikleri öğreneceksiniz:
text-shadowbox-shadow
CSS Metin Gölgesi
CSS text-shadow Öznitelik, metne gölge ekler.
En basit kullanım, sadece yatay gölgeyi (2px) ve dikey gölgeyi (2px) belirtmektir:
Metin gölgeleme etkisi!
Örnek
h1 {
text-shadow: 2px 2px;
}
Sonra, gölgelere renk ekleyin:
Metin gölgeleme etkisi!
Örnek
h1 {
text-shadow: 2px 2px red;
}
Sonra, gölgelere bulanıklık etkisi ekleyin:
Metin gölgeleme etkisi!
Örnek
h1 {
text-shadow: 2px 2px 5px red;
}
Aşağıdaki örnek, siyah gölgeli beyaz metni gösterir:
Metin gölgeleme etkisi!
Örnek
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Aşağıdaki örnek, kırmızı neon ışık gölgelerini gösterir:
Metin gölgeleme etkisi!
Örnek
h1 {
text-shadow: 0 0 3px #FF0000;
}
Çoklu gölgeler
Metinde çoklu gölgeler eklemek için, gölgeler listesini virgülle ayırabilirsiniz.
Aşağıdaki örnek, kırmızı ve mavi neon ışık gölgelerini gösterir:
Metin gölgeleme etkisi!
Örnek
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Aşağıdaki örnek, siyah, mavi ve koyu mavi gölgelerle beyaz metni gösterir: }}
Metin gölgeleme etkisi!
Örnek
h1 {
color: white;
text-shadow: 1px 1px 2px siyah, 0 0 25px mavi, 0 0 5px koyu mavi;
}
text-shadow özelliğini kullanarak metin etrafında saf bir çerçeve (gölge olmadan) oluşturabilirsiniz:
Metni çevreleyen çerçeve!
Örnek
h1 {
color: yellow;
text-shadow: -1px 0 siyah, 0 1px siyah, 1px 0 siyah, 0 -1px siyah;
}
- Önceki Sayfa CSS Dairesel Geçiş
- Sonraki Sayfa CSS box-shadow
