İnternet Explorer ile bir çok sorun yaşıyoruz genelde ie’nin boyut
taramalarında. Bu sorunların kaynağı “hasLayout” olarak adlandırılan ie
kabulü. hasLayout hakkında ayrıntılı bilgi için -bu siteye göz atın-.
Microsoft bu tanımlamadaki hatasını kabul etti ve ie8 de “hasLayout”
kabulunü bıraktı. Buna da şükür.
Ben genelde bu sorun ile özel textbox alanlarını kodlarken
karşılaşıyorum.
Böyle bir kod yazıyorum. Dıştaki div(div.dis) herhangi bir kapsayıcı div
olarak düşünün. Sayfanın diğer bir öğesi yani bu arama kısmı ile alakası
yok. Bu kapsayıcı katmandaki margin tanımı ie’de sorun çıkarıyor.
Firefox’da yukarıdaki gibi bir görüntü alırken
İnternet Explore 6 ve 7 sürümlerinde yukarıdaki gibi bir görüntü ile
karşılaşıyorum. En dıştaki katmana atadığım margin-left değeri içerideki
elemanımı etkiliyor. Kalıtsal olarak bu değeri alıyor. Sorunu ilk önce
“IE’da İkikat görülen Margin Problemi ve Çözümü” anlattığım gibi bir
sorun olduğunu düşündüm ama değildi. Bu sefer ki farklı bir sorun.
positioniseverything.net sitesinde aynı sorunu görünce anca adını
koyabildim.
Sorun; input alanını kapsayan ebeveyn elemanda hasLayout ve margin
tanımı var ise oluyor. Kaynak kısmında verdiğim sitede bir kaç çözüm
önerisi var. Ancak ben hasLayout sorunlarının en kolay çözüm yolu olan
zoom:1 tanımı ile bu sorunu aştım. Margin tanımı olan elemana zoom:1
tanımı yapınca sorun çözüldü
Bu sorun tüm input çeşitlerinde(text, checkbox, radyo buton ve resim)
meydana geliyor, ayrıca textarea’da yaşanıyor bu sorun, ancak select
elemanında bu sorun ile karşılaşılmıyor.
Yine sitenin yıl dönümünü kaçırdım, güya ayrıntılı bir yazı yazacaktım.
14 Nisan’ı biraz geçtik ve 5. seneye ayak bastık. Zaman ne kadar çabuk
geçiyor. Neyseki geriye bakınca elle tutulur bir şeyler görmek güzel.
Geçen senenin istatistikleri
48 yazı
277.428 tekil kullanıcı
730.199 sayfa görünümü
Toplamda 5.151 yorum var ve 45.164 yorumu akismet spam olarak yakalamış.
Beni en çok sevindiren istatistik css dersleri sayfasının
anasayfadan daha çok ziyaret edilmesi. Önümüzdeki senenin daha güzel
geçeceğini ümit ediyorum.
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.
Bu makalede sizlere web sitemizde metinlere gölge vermek için hangi
yöntemleri kullanabileceğimizi anlatmaya çalışacağım.
text-shadow
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: (değer)
Aldığı Değerler : shadow,… | none | inherit Başlangıç değeri: tanımlama yok Uygulanabilen elementler:tüm elementler
Kalıtsallık: Yok
text-shadow değeri 4 kısımdan oluşur. Bir örnek ile açıklayalım.
3px; İ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.
1px; 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; renk değeri. Gölgenin renk değerini gösterir.
CSS Öğren
CSS hakkında daha fazla bilgiye ulaşman çok kolay. CSS Dersleri sayfasında CSS hakkında bilmen gereken tüm bilgilere dair makale bulunuyor. Hemen Öğrenmeye Başla
Birden fazla gölge kullanımı
Birden fazla gölge tanımı yapabiliyoruz. Aralarında virgül kullanarak
birden fazla virgül kullanabiliyoruz. CSS2’de birden fazla gölge
kullanımında üst üste binmesi durumunda normal sıralamada başta olan
üstte sonradan tanımlananlar altta kalırken CSS3 ile birlikte bu durum
değişti. CSS3’de tam tersi bir durum söz konusu.
Virgül ile ayrılarak birden fazla gölge kullanılabilir.
Tarayıcı Uyumu:
Internet Explorer desteklemiyor
Firefox 3.5+
Chrome 2+
Safari 1.3+
Opera 9.5+
W3C’s CSS Level 2+
CSS Profile 2.0 ve 3.0
Çoklu gölge kullanımını Safari ve Google Chrome daha sonra
desteklemiştir. Safari 4 ve Google Chrome 2’den sonra tam destek
gelmiştir.
Örnek Çalışmalar
Konuyu daha iyi anlamak ve sonuçlarını görmek için bir kaç örnek
yapalım.
Görüldüğü gibi resim düzenleme araçları ile elde edebileceğimiz bir çok
gölge efektini text-shadow ile elde edebiliriz. Farklı değerler yardımı
ile bir çok gölge çeşidini elde edebiliriz.
İnternet Explorer için Gölge Sorunu Çözümü
Yukarıdaki kodlarımızı İnternet Explorer yorumlamayacaktır. Buna tüm
sürümleri(6,7,8) dahil. Yeni çıkacak 9. sürümde de bu konuda bir
ilerleme olduğuna dair bir bilgi yok.
İnternet explorer için bu durumu “filter” yardımı ile çözebiliyoruz.
text-shadow özelliği kadar iyi sonuçlar vermese de bazı durumlar için
bize çözüm sunuyor.
Bu filtrelerden bir kaçını gölge vermek için kullanabiliriz. İnternet
explorer filtrelerini uyguladığımız elemana eğer genişlik, yükseklik
veya postion:absolute tanımı yapıldı ise sorun çıkarır. Bu nedenle gölge
uygulanacak metini <span> etiketi içine alıp span etiketine ie gölge
özellikleri tanımlanır.
Shadow filtresi
Bu uygulama sonucunda aşağıdaki görüntüyü elde ederiz.
Bu özelliği kullanarak sınırlı çerçevede gölge oluşturabiliriz.
Kullanacağımız yere göre bu yöntemde tercih edilebilir. Daha keskin ve
belli açılarda kullanılabilir.
Glow Filtresi
Glow filtresi metin etrafında çevreleyen bir katman oluşturur ve görüntü
olarak gölge etkisi verir.
Ayrıca glow ve blur filtrelerini beraber kullanarak bir çözüm
üretilebilir. kilianvalkhof.com sitesinde bahsedilen bu yöntem ile
gerçeğe daha yakın sonuçlar elde edilebilir.
Örneği görmek için tıklayınız.
(http://kilianvalkhof.com/uploads/ieshadow.html)
Ayrıca aynı sitede bu yöntemi kullanan bir jquery eklentisi
geliştirilmiştir. Kodlamayı kolaylaştıran bu yöntemde denenebilir.
Ayrıntılı bilgi için tıklayınız.
Tekrarlayan Metin Kopyası ile Gölge Oluşturma
Aynı metni iki kere veya daha fazla kopyalayıp position ve konumlandırma
değerleri ile gölge etkisi verilen bir yöntemdir. Farklı tarayıcılarda
aynı etkiyi verir. Sorun oluşturan tek yanı ise içerikte yazının birden
fazla geçmesi ve fazladan etiket eklemesidir.
Yukarıda metinlere gölge vermek ile alakalı bir kaç yöntemden bahsettim.
İlk yöntemimiz standartlarda olan text-shadow yöntemi idi, diğer
yöntemler ise standartları desteklemeyen tarayıcılar için üretilen çözüm
önerileridir.
Ben bir kaç projemde bu yöntemleri kullandım, sonuç olarak şunu
diyebilirim ki projelerimde standart yöntemi kullandım, desteklemeyenler
için ayrıca kod yazma gereği duymadım. Bu tercih sonucu bir çok
kullanıcı(hala bir numaralı tarayıcı olan İnternet Explorer
kullanıcıları) bu etkiyi görmeyecektir, ancak ie için oluşturulan hiç
bir yöntem bize gerçek görsel etkiyi vermediğide kesindir.
Tercihimizi yaparken ya bu metinleri resim olarak ekleyeceğiz yada
standardı uygulayacağız ve destekleyenler gösterecek, desteklemeyenler
görmeyecek seçeneklerinden birini seçmek zorunda kalıyoruz. Bende
standardı uyguladım ve ie kullanıcılarını maalesef dışarıda bıraktım
projelerimde. Diyeceksiniz ki peki diğer yöntemleri niye anlattınız.
Tercih konusundan benim kadar esnek kalamayan web geliştiricileri için
bir çözüm olduğunu göstermek için.