Yakında resmi olarak yayınlanacak olan CSS 3.0 protokolü tarayıcılarımıza çok güzel görünümler kazandıracak. Hatta şu günlerde bazı tarayıcılar sayesinde CSS 3.0 özelliklerini kullanabiliyoruz.  Ne yazık ki şu aralar CSS 3.0 kodlarıyla hazırlanmış siteler yapmak çok da mantıklı değil. Gördüğüm kadarıyla tarayıcılar arasında CSS3.0 ‘ı  en güzel destekleyen tarayıcı Apple Safari. Aşağıda vereceğim örnek CSS3.0 sitelerini gezerken Safari kullanmanızı tavsiye ediyorum.

Tabiki CSS3.0 ziyaretçilerden çok web tasarımcılarını sevindirecek özelliklerle dolu geliyor. Web tasarımcıları ilgilendiren en önemli nokta, bizlerin daha uzun zaman ayırarak hazırladığımız noktaları kolayca yapmamızı sağlayacak kodlar. İlk aklıma gelen örnekse; yuvarlak köşeli kutular, butonlar oluşturmak için imajlarla boğuşmamız gerekmeyecek.

1. Yuvarlak köşeli kutular

CSS2.1′de yuvarlak köşeli kutular oluşturmak için imaj dosyaları kullanıyorduk. Bu işlemi yaparkende uzun bir uğraş gerekiyordu. Bu sebeplerden de internetteki bir çok site bununla uğraşmadan köşeli tasarımlara kayıyordu. CSS3.0 ile beraber border-radius bildirimi geliyor. Bu sayede kutularımızın köşelerine border-radius:10px gibi değerler vererek gerekli yuvarlatma işlemini kolayca gerçekleştirebiliyoruz.

Örnek:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Şimdilik CSS3.0 protokolü yayınlanmadığı için her tarayıcıya kendi anlayacağı css kodlarını yazmak gerekiyor. Yukardaki örnekte olduğu gibi -moz ifadesi mozilla firefox’un bu kodu okuması gerektiğini, -webkit ise  webkit altyapısını kullanan tarayıcıların ( Safari, Chrome) bunu okuması için yazıldığını görebiliyoruz. Dikkat ettiyseniz İnternet Explorer için bir kod eklenmemiş. Bu konuyla ilgili örneğe Twitter sitesinden bakabilirsiniz. Border Radius ile ilgili daha detaylı bilgiye ve örneklere Art of Web sitesinden ulaşabilirsiniz.

2. Borderlarda imaj kullanmak

Css3.0 ile beraber gelen güzel yeniliklerden biride çerçevelerimizde kolayca imajlar kullanabilmemizdir. Nasıl mı oluyor? Mesela resimlerimize verdiğimiz çerçeveler (border) artık kendi belirlediğimiz resimlerden oluşabilecek. Şimdilik ne kadar gerekli olabileceğini tam kestiremiyorum ama bundan sonraki sitelerde çok daha güzel tasarımlar uygulanabilir olacak. Bu yeni css kodu border-image bildirimi ile sağlanıyor.

Örnek:

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

Border-image safari, ve firefox’ta çalıştığı söyleniyor ama bendeki firefox’ta çalışmadı. Nasıl çalıştığını görmek için Blog.SpoonGraphics sitesine bakabilirsiniz. Daha fazla bilgi edinmek ve kullanım örnekleri içinse Border-image on CSS3.info adresine bakabilirsiniz. Border-image özelliği için şimdilik aynı border-radius daki gibi tarayıcı kodları eklememiz gerekiyor.

3. Transparanlık ayarı ve alpha rengi

Css3.0′ın en beğendiğim ve beklediğim özelliklerinden biride transparanlık ayarı. Artık sayfalarımıza transparan efektler verebileceğiz. Bu sayede şeffaf resimler kullanma durumumuzda kalmayacak. Bizlere ne gibi faydaları olabilir dersek, çok daha canlı tasarımlar yapabileceğiz. Zaten CSS3.0 dan tasarım harici bir şey beklemek de yanlış olur. Transparanlık rgb renklerine eklenen alpha değeri ile sağlanıyor. Artık renk kodlarımız rgba olarakda ifade edilecek.

Örnek:

rgba(200, 54, 54, 0.5);
/* örnek: */
background: rgba(200, 54, 54, 0.5);
/* yada */
color: rgba(200, 54, 54, 0.5);

Transparanlık bence ilerde oldukça işimize yarayacak. Bu konuya örnek teşkil edecek güzel bir örnek olarak 24 Ways sitesine bir göz atabilirsiniz. Transparanlık ve rgba hakkında daha fazla bilgi ve örnek için RGBA on CSS3.info sitesine bakabilirsiniz. Bu özellik bence en güzel Safari’de çalışıyor. Bu özellik için tarayıcı kodları gerekmiyor.

4. @font-face özelliği

CSS 3.0 ile beraber gelen daha bir çok özellik var, yazı gölgeleri, gazeteler gibi sütünlu yazma, ya da en çok beklediğim font face özelliği gibi.  Birazda @font-face özelliğinden bahsedeyim; @font-face sayesinde modern tarayıcılara sitemizde kullandığımız fontları dışardan yükletebileceğiz. Böylece  artık içimizi sıkan sıkıcı web fontlarını kullanmamız gerekmeyecek, ya da  sirf tekniğini kullanmıyacağız. İstediğimiz her fontu yükletebiliyoruz derken, benimde aklıma takılan telif hakkı olan fontlar yani ücretli olanları merak ediyorum. Bir de tabiki fontları yükletmek sayfaların açılışında belirgin bir yavaşlamaya sebep olabilir. @font-face için güzel bir örnek olması için TapTapTap sitesine bakabilirsiniz. Tavsiyem ie ve safariyle beraber bakmanız. Aradaki farkı en iyi böyle görebilirsiniz.

Örnek:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Umarım css 3.0 hepimizin işine yarar, yarayacağını düşünüyorum. Bu sayfadaki yazıyı Smashingmagazine sitesinden görüp Türkçe’ye uyarlamaya çalıştım. Hatalarım ve eksiklerim için kusura bakmayın.

İlginizi çekebilecek benzer yazılar:

1. Yeni ve başarılı 30 tasarım blogu Tasarım konusunu ele alan yüzlerce başarılı blog olduğunu biliyoruz. Gerek yayınladıkları eğitici makaleler, gerekse kaynak...
2. Photoshop CS4′ün yeni özelliklerini kavramak için 13 video Web Design Ledger, Photoshop CS4 ile yeni gelen özelliklerin tamamının yer aldığı bir tutorial toplaması...
3. Yeni WordPress magazin stili tema: Magazeen Bildiğiniz gibi Smashing Magazine her ay ücretsiz premium kalitesinde temalar yayınlıyor. Bu ayki tema ise...