Gölgelendirme tekniğinin hızla popüler olması nedeniyle sistemlerin hızlandırılması adına css 2.0 ile birlikte text-shadow özellğiği geitirldi. Ancak bu özelik css 2.0.1 ile kaldırıldı. Uzun süre biz bu özellikten mahrum kaldık ancak css 3.0 ile text-shadow özelliği tma olarak kullanılmaya başlandı ve bizlerde sistemlerimizi kasmadan resim dosyalarına muhtaç olmadan gölgelendirme tekniğini kullanmaya başladık.
Text-Shadow’un Özellikleri
Bu özellik bir element içindeki metne bir veya daha fazla gölge vermek için kullanılır. Aldığı değerler belli sıralaması vardır.
Yapısı : text-shadow:
Aldığı Değerler : shadow,… | none | inherit
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
Text-Shadow’u Nasıl Kullanırım?
Gölgelendirme yapacağımız yazıya “test” classını atadığımızı farzedersek.
.test {
text-shadow: #6374AB 20px -12px 2px;
}
Css dosyamızda yukarıdaki biçimde yaptığımız kodlama bize istediğmizi verecektir.Dilerseniz bu kod blogununun içine bbirden fazla tanımlama yaparak yazınıza birden falza text-shadow özelliği katabiliriz.
Örnek
.test {
text-shadow: #6374AB 20px -12px 2px;
text-shadow: #FFFFE0 20px 12px 22px;
}
Şimdi gelelim hangi kodun ne işe yaradığına. Yukarıda vermiş old
uğumuz örnekteki #6374AB bize gölgemizin hangi renkte olacağını belirtir. Hexadecimal olarak istediğiniz bir değeri verebilirsiniz. 20px değeri bize x eksenindeki yerini ayarlama imkanı verir. -12px değeri bize gölgenin y eksenindeki yerini belirtir. 2px değeri ise gölgenin blur değerini verir. Bu değeri ne kadar az verirseniz gölgeniz o kadar açık renkte olur. Fazla verilen değerler kötü bir görüntüye sebebiyet verebilir.
Text-Shadow özelliğiyle ilgili şimdilik bahsedeceklerim bu kadar arkadaşlar.
Faydalı olması dileğiyle
Css ile Metin İfadelere Gölge Vermek