shadow | bildirgec.org

Hayatı kolaylaştıracak CSS tekniği nasıl mı olur? İşte cevabı... CSS3 birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin Yuvarlak Köşeler (rounded corners) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.

1. Yuvarlak Köşeler
jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını CSS Sprite tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.

rounded corners

2. Eleman Gölgesi
Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow'u aslında jQuery'nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.

Glossy.js 1.2, web sitenizdeki resimlerinize, köşe ekleme, gölge etkisi sağlama gibi özellikleri, kolayca eklemenizi sağlıyor. Kod kalabalığı olmadan, tek bir tag ile çalışan bir javascript.

Mozilla Firefox 1.5+, Opera 9+, IE6+ ve Safari gibi bilinen tüm internet gezginleri ile problemsiz çalışıyor.

yapmanız gereken, glossy.js dosyasını indirmek ve şuradaki işlemleri uygulamak.

hepimiz elektriklerin kesik olduğu akşamlarda televizyonsuz ve bilgisayarsız geçen uzun saatlerde, mum ışığında duvara elimizle köpek ve tavşan gölgeleri düşürerek yaratıcılımığızı zorlar ve eğlenmeye çalışırız. hatta kuş yapabilenler bile vardır. Ancak bir de şöyle amcalar var ki, mum ışığı ve gölge olayını aşmışlar birazcık..

bildiğiniz gibi genelde tasarımdaki gölgeler için resimler kullanırız. ama buradaki makalede, gölgeler (drop shadow) resimler ile değil css ile yapılmış. mantık gayet basit: her div elementinin position değeri 2 pixellik relative değer almış. demo sayfası ise burada