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

border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
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.

box shadow

box-shadow: 5px 5px 2px black;-moz-box-shadow: 5px 5px 2px black;-webkit-box-shadow: 5px 5px 2px black;
3. Yazı Gölgesi
CSS ile yazı gölgesi yapabilmek için eskiden iki divi üst üste getirip, araya çok ufak bir top margin ve left margin koyuyorduk. İki div’de farklı renklerde aynı yazının bulunmasına da önem gösteriyorduk. CSS3 ile yazı gölgesi desteği de geldi.

text shadow

Eski tip yazı gölgesi

Yeni tip yazı gölgesi

The quick brown fox jumps over the lazy dog.

4. Font Desteği
Cufon, sIFR, FLIR gibi servisleri sırf CSS’in desteklemediği fontlar için kullanmadık mı? Hala çok popüler olan bu servisler gelecekte tarihin tozlu sayfalarında yerlerini alacaklar. Çünkü CSS3 ziyaretçinin bilgisayarında bulunmayan fontları indirerek gösterime izin vermekte.

font face

Yaşasın @font-face

The quick brown fox jumps over the lazy dog.

5. Opaklık
Zaman zaman png dosyaları ile sağladığımız, zamanla css’nin de içine sızan opacity’i CSS3 ile tüm tarayıcılar destekleyecek.Eski usul opaklık ayarlama

CSS3 ile opaklık ayarlama

6. RGBA Desteği
Herkes RGB’nin red, green ve blue (kırmızı, yeşil ve mavi) olduğunu bilir. Ama nedir bu A harfinin anlamı? A harfi Alpha’nın baş harfidir. Alpha ise transparanlık değerini belirlemektedir. Daha önce php ile sağlanan rgba desteği artık CSS3 ile server tabanlı bir uygulama olmaktan kurtuluyor.CSS3 kullanımı

7. Arkaplan Resmi Boyutu
Arkaplan resmini Windows’taki döşeme usulü kutumuzun içine yapıştıran CSS’e resmin boyutlarını belirtmek için bol satırlı tanımlamalar yapardık.

Fakat dediğimiz gibi CSS3 hayatı kolaylaştırıyor.

8. Çoklu Arkaplan Resmi
Bir içeriğin arkaplanına iki resim üst üste atayabilmek için, iç içe iki div tanımlamalı, bir de üsttteki resmin arkaplanını transparan yapmak zorunda kalırdık. Çok şükür ki CSS3’e gelen özellik ile bir elemana birden çok arkaplan resmi tanımlayabilecek, bunları sıralayarak hangisinin daha üstte görüneceğini belirleyebileceğiz.

9. Hücreler
bir paragrafı iki hücre halinde sayfaya yansıtmak için çok kez javascript’e başvurduk, sayfalarımızı gereksiz kodlarla doldurduk. CSS3 bu uğraşımıza çare bulmuş ve nihayet hücrelendirmeyi bünyesine katmış.

hücrelendirme

10. Kenarlık Resmi
Border olarak tanımladığımız ve sadece çizgiden ibaret olan bu elemanlar sizin de canınızı sıkmadı mı? Eğer cevabınız evet ise, CSS3 kullanarak borderlarınıza istediğiniz resimleri koymanızda hiçbir sakınca yok!

border’a resim koymak css3 ile mümkün olacak

11. Animasyonlar
jQuery ile yapabildiğimiz animasyonlar Webkit’li tarayıcılarda hiç javascript kodu yazmadan görülebilecek.

Sözün Özü
Yakın gelecekten CSS3’ün iyice yaygınlaşması ile bir işe ayrılan zamanda azalmalar olacaktır. Her ne kadar IE başta olmak üzere tarayıcıların birbirleriyle olan uyumsuzluğuna bir çare bulunamasa da CSS3, birkaç popüler uygulama için bu uyumluluğu sağlayacak gibi görünüyor.Not: Bu yazının orjinali Nettutssitesinde 11 Classic CSS Techniques Made Simple with CSS3 başlığı ile yayınlanmış olup, bildirgeç için Tükçe’ye çevrilmiş ve yazar tarafından yorumlanmıştır.İlgilinizi çeker mi?
# firefox 3.5 ile web geliştiricileri sevinecek# CSS ile şekil çizmek çok kolay!# CSS Sprite’ların kullanış alanları# yeni html5 tag’leri ve kullanım şekilleri# CSS Sprite kullanmak artık daha kolay!Beni takip edin
basarozcan: RSS, Twitter, FriendFeed