Css İle Gölgeli Yazı Yapımı - Webmaster Forumu

OmAr · #1 (**permalink**) 11-05-2008, 21:15:14

Örnek Görünü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

Kod:

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

Kod:

<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

Kod:

h1 {
    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

Kod:

h1 span {
    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
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

Kod:

h1 span {
    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

Kod:

<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

Kod:

.golge  { 
    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

Kod:

.golge span { 
    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

Kod:

.golge:before {
    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

Birde İE için yazılmış kod bulunmakta örnek

Kod:

h1 {
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=10,direction=310);
}

strength=10 10 yazan yerden gölgeyi ayarlayabilirsiniz

Kendi yapımımdır. Yalnızca bir uyumlulukla ilgili kısımda iframeden destek alınmıştır.

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Sahte Pr Yapımı	Ptah	Google	0	18-05-2007 19:43:05
Kaya Yapımı	MetTo	Photoshop, Corel, Freehand, Fireworks	6	06-05-2007 19:44:11
3.6.4 - Gölgeli Kullanıcı İsimler	MetTo	Vbulletin	5	17-04-2007 22:57:32
Damga Yapımı	MetTo	Photoshop, Corel, Freehand, Fireworks	5	09-02-2007 20:35:58
SMF - İstatistikler Top 10 Yapımı	DooMsDaY	SMF	6	23-01-2007 22:06:35

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)