Css3 bilindiği gibi birçok yenilik ve seçenekle geliyor. Arkaplanları istediğimiz ölçüde kesebilme, yuvarlak köşeler, kenarlıklara resim ekleyebilme ve daha birçoğu. Bu yeniliklerden birisi de text-shadow özelliği. Bu özellik yazımızın başlığında da belirttiğimiz gibi metinlere gölge efekti verebilmemizi sağlıyor. Bu sayede farklı yöntemler kullanmaya gerek kalmadan yazılarımıza gölge izlenimi verebiliyoruz. Dilersek gölgemizin boyutlarını ve rengini de ayarlayabiliyoruz. Şimdi isterseniz örnek bir kullanıma gözatalım.

p { font:bold 16px “Arial”, Helvetica, sans-serif; text-shadow: 4px 4px 2px #2e83ff; }

Örnek kodumuzda kalın yazıyla gösterdiğimiz alan bu özelliğin tam kullanılmış halidir. Burada yaptığımız şeyi biraz açıklayalım. Önce p etiketimize yazıtipi ve boyutu ataması yaptık, sonrasında text-shadow parametresi kullarak gölgemizin özelliklerini belirledik. Örnek kod üzerinde 4 tane değer görüyorsunuz. Sırasıyla 4px 4px ve 2px olarak gölgemize ait yön ve son olarakta renk değerlerini giriyoruz.

Değerlerin sırasıyla ne manaya geldiğini sizlere bir resim üzerinde anlatmayı uygun gördüm. Aşağıdaki resimde değerlerin ne işe yaradığını görebilirsiniz.

Text-shadow özelliği Css3′te metin biçimleyici tüm (X)Html etiketleriyle birlikte çalışabiliyor. (h1, h2, h3, p, gibi) Bu özelliği dilerseniz kendi oluşturduğunuz Css sınıflarında da (Class) kullanabiliyorsunuz. Yani bir bakıma kullanım yeri tamamiyle size bırakılmış. Değerleri dilerseniz px isterseniz de em cinsinden verebiliyorsunuz. (text-shadow: 0.1em 0.2em 0.1em blue; gibi)

Tabi bir de bu yeni Css3 özelliğinin görüntülenme sorunu var. Ne yazık ki hala tüm tarayıcılar bu özelliği göstermiyor. Ben bu uygulamanın önizlemesini Opera 9.6.2 sürümünde yaptım. Opera üzerinde Css3′ün bazı parametreleri sorunsuz çalışıyor. Bununla birlikte Firefox 3.1a sürümünde de bu özellik düzgün gösteriliyor.

Kendi bilgisayarımda yapmış olduğum örnek dosyada elde ettiğim görüntüyü de aşağıda görebilirsiniz. Umarım faydalı olmuştur. Güzel günler dileğiyle…

Rastgele Yazılar