CSS3 ile Metinlere Gölge Efekti Verme (Text-Shadow)
CSS3 sayesinde web sayfamızdaki metinlere (örneğin h1 etiketine) gölge verebiliriz.
Yapmamız gereken şey gölgenin yatay ve dikey konumlarını belirtmektir. İsteğe bağlı olarak gölge rengi ve blur efekti de kullanabiliriz.
Aşağıda en basit kullanım ile h1 etiketine gölge uygulanmıştır.
h1 {
text-shadow: 2px 2px;
}
Negatif değerler gölgenin sol veya üstte çıkmasını sağlar.
h1 {
text-shadow: -2px -2px;
}
Gölge rengi belirtilebilir:
h1 {
text-shadow: 2px 2px red;
}
Blur efekti kullanılarak gölgenin dağılma miktarı belirtilebilir:
h1 {
text-shadow: 2px 2px 5px red;
}
Birden fazla gölge uygulanarak farklı görünümler elde edilebilir:
h1 {
color: white;
text-shadow: 3px 3px 2px black, 0 0 25px blue, 0 0 5px red;
}
css ile gölge oluşturma, css shadow kullanımı, css ile metinlere gölge verme, kutulara gölge verme, text and box shadow examples tutorials
KONU İLE İLGİLİ ÖRNEKLER
6158 kez okundu.