14 Aralık 2015 Pazartesi

Yazılara Gölge Efekti Text-Shadow

Yazılara bir CSS özelliği olan Text-Shadow ile gölge verebiliriz. İngilizce kelime olan shadow, gölge anlamına gelmektedir. Örneklerle özelliği anlamaya çalışalım.

#div {
text-shadow: 2px 3px 4px #CCC;
}

Burada pixel değeri verilen her bölgenin belli bir işlevi vardır. Karışmaması için 2px, 3px ve 4px değerlerini sırasıyla verdim. Kod yapısını inceleyelim.

2px değeri ile gölgenin yazıya göre x ekseni boyunca uzaklığı verilmiş oldu. 1. Değer

3px değeri ile gölgenin yazıya göre y ekseni boyunca uzaklığı verilmiş oldu. 2. Değer

4px değeri ise gölgenin blur yani bulanıklık ayarlamasında kullanıldı. 3. Değer

#CCC ile gölgeye renk verildi. 4. Değer