CSS İle Yazıya Gölge Efekti Vermek | Text Shadow

Metinlere gölge vermek, site görselliği açısından her zaman tasarımcıların tercih ettiği yöntemlerden birisidir. Bir çok sitede bu durum ile karşılaşırız. Normalde bu gibi durumlarda gölge verilen alanlar resim olarak kesilip siteye eklenir. Bu durum anlamlı kodlama ve arama motorları için pek mantıklı değildir, ayrıca resim dosyaları metne göre daha fazla boyuta sahip olması nedeni ile de dezavantajlıdır.

Bunun için text-shadow özelliği standartlara eklendi. CSS 2 ile birlikte gelen text-shadow özelliği daha sonra CSS 2.1'da kaldırıldı. Daha sonra CSS 3 ile birlikte tekrar geldi. Safari bu özelliği ilk sürümünden itibaren desteklerken aynı şeyi diğer tarayıcılar için söylemek zor. text-shadow özelliği ile görsel düzenleme programlarında(photoshop, fireworks) kullanılan gölgeye yakın sonuçlar elde edebiliriz.

Öncelikle text-shadow'un yapısını bir inceleyelim. text-shadow maximum 4 değer almaktadır. Bu değerlerden bir tanesi isteğe bağlı olduğundan 3 ve 4 değerli olarak kullanılır. Şimdi bu değerleri bir inceleyelim.

div{text-shadow: 1px 2px 3px #000}

Yukarıdaki kodda yer alan değerleri şöyle açıklayabiliriz.

1px; İlk değer yataydaki mesafe içindir Artı değerler metnin sağından itibaren uzaklık değeridir, negatif değerler metnin soluna doğru mesafeyi gösterir.

2px; İkinci değer dikeydeki mesafe içindir. Artı değerler metnin altına doğru mesafeyi gösterir, eksi değerler ise metnin üstüne doğru mesafesini gösterir.

3px; Bulanıklık(blur) değeridir. Gölgelerin gerçeğe yaklaşması için kullanılır. Bulanık yatay ve dikey için verilen değerler göre şekil alır.

#000; ise gölgenin hangi renk olacağını göstermektedir.

Dersi takip ederek daha iyi bir sonuç elde edebilirsiniz. Dokümanları indirerek de kodlar üzerinde denemeler yaparak işi kavrayabilirsiniz.
- 13.07.2013 / 18:01:48 0

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

3:42 Php Dersleri

Count Komutu İle Verilerin Kaç Tane Olduğunu Bulmak

Kategori: Php Dersleri | 02.05.2013
14:26 Php Dersleri

Cookie İşlemleri ve Üye Girişi Alanı Yapımı

Kategori: Php Dersleri | 02.05.2013
Php Dersleri

Botların Siteden Veri Çekmesini Engelleme

Kategori: Php Dersleri | 07.08.2013
10:53 Php Dersleri
6:03 Css Dersleri

Css ile Kelimelere ve Harflere Boşluk Vermek

Kategori: Css Dersleri | 04.05.2013

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.