Css İle Gölgeli Yazı Yapımı
css ile gölgeli yazı yapmak aslında tek kodla yapılabiliyor fakat firefox da dahil bir çok tarayıcı desteklemiyor tam olarak emin değilim fakat tek destekleyen tarayıcı safari durum böyle olunca alternatif gölgelendirme teknikleri yapılmakta burada uyguladığım kendi yaptığım gölgelendirmeler mevcut.
İlk olarak css nin kendi gölgelendirme koduna bakalım
p {text-shadow: -2px -2px 4px silver}
üstteki kodumuzda direk bir elemente gölgelendirme verebiliyoruz fakat bu kod çoğu tarayıcılar tanımıyor o halde gelelim alternatif yollara ilk önce kendi yaptığım burada da kullandığım yöntemle başlayalım
İlk olarak html kodumuza başlayalım
<h1>Gölgeli Yazı<span>Gölgeli Yazı</span></h1>
üstteki kodumuzda h1 elementi yazının aynısını birde span elementi içerisinde yazıyoruz birisi asıl birisi ise gölge olacak css kısmına geçelim
h1 {
color: silver;
font-family: Verdana, serif;
letter-spacing: 1px
}
color: silver;
font-family: Verdana, serif;
letter-spacing: 1px
}
h1 elementine silver rengi verdik birde verdana font tipi verdik son olarak yazı aralığını 1 pixel açtık
h1 span {
display: block;
position: relative;
top: -39px;
left: -0.4mm;
color: black;
}
display: block;
position: relative;
top: -39px;
left: -0.4mm;
color: black;
}
span elementine ise block görünümü vererek alta aldık göreceli bir konumlandırma verdik font tipine göre yukarı ve sola çektik son olarak renk verdik.
Tabi burada gölgelendirmeyi istediğimiz yere alabiliriz sağ veya sola gibi
Örnek - Ön İzleme
Tabi bu gölgenin bir kusuru var her nekadar ilk bakışta göze çarpmasada biraz kurcalarsak sorunu görebiliriz ön izleme sayfasındaki yazıyı büyütüp küçültürsek sorunu görebiliriz bu sorunu çözebiliriz ama diğer gölgeden biraz daha farklı görünecektir yapmamız gereken
h1 span {
display: block;
position: relative;
top: -1.2em;
left: -0.4mm;
color: black;
}
display: block;
position: relative;
top: -1.2em;
left: -0.4mm;
color: black;
}
kalın olarak yazdığım yeri diğer kodla değiştirdiğimiz taktirde yazılar büyütüp külütülse bile bir bozulma olmayacaktır.
tabiki her ikiside kullanılabilir tercih sizin ama bunu her yazıda kullanmak doğru olmaz Sadece başlıklar için uygun olabilir fakat iki satır olmamasına dikkat edin.
Diğer bir gölgelendirme tekniği ise title kullanımı ile yapılmakta bu uygulamayada bir göz atalım fakat bu uygulama ie6 tarayıcısında çalışmıyor ie7 de ise bilemiyorum bakmadım.
html kodumuz ile başlayalım
<h1 class="golge" title="Gölgeli Yazı"><span>Gölgeli Yazı</span></h1>
Burada "h" elementine bir "class" atıyoruz ve yazıyla aynı olan birde "title" yazıyoruz aynı yazıyı "span" elementinin içine yazıyoruz geçelim css kısmına
.golge {
position: relative;
display: block;
color: black;
letter-spacing: 1px
}
position: relative;
display: block;
color: black;
letter-spacing: 1px
}
atadığımız "golge" classına göreceli konumlardıma ve block görünümü veriyoruz renk ve yazı aralığını ayarlıyoruz
.golge span {
position: absolute;
display: block;
top: 0px;
}
position: absolute;
display: block;
top: 0px;
}
"span" elementine mutlak konumlandırma ve block görünümü veriyoruz ve göreceli konumu ile sıfırlıyoruz
.golge:before {
display: block;
padding: 1px 0 0 1px;
content: attr(title);
color: silver;
}
display: block;
padding: 1px 0 0 1px;
content: attr(title);
color: silver;
}
üstteki kodumuzda ise ":before" seçicisini kullanarak title deki yazımızı yazdırmamızı sağlıyoruz renk verip yazdırdığımız yazıyı üstten ve soldan 1 rer pixel itiyoruz böylece bir gölgelendirme yapıyoruz
Kaynak: designmeme
Örnek - Ön İzleme
Birde İE için yazılmış kod bulunmakta örnek
h1 {
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=10,direction=310);
}
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=10,direction=310);
}
strength=10 10 yazan yerden gölgeyi ayarlayabilirsiniz
