Seyfullah KILIÇ

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS’nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması‘nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliÅŸtirdiÄŸiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceÄŸe taşıyabilirler.

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

border-radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:

-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;

Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.

Ayrıca bakınız:

• W3C ÅŸablonu
• CSS3.info’da border-radius
• Web Sanatı

2. Border Image

border-image

Adından da anlaşılabileceği üzere border-image, her bir nesnenin sınırları için bir görsel kullanabilmemizi sağlıyor. İlk olarak görsel, nesenin her bir köşesi için oluşturuluyor. Görselin her bir köşesi, HTML nesnesinin bir köşesine işaret ediyor. Ardından bu görsel aşağıdaki sözdizimi kullanılarak siteye aktarılıyor.

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: 5px;} özniteliği sınırın genel genişliğini belirtirken ardından uygulanan her bir border-image kuralı görsel dosyasını hedefliyor ve tarayıcıya görselin o 5px genişliğindeki alanın ne kadarını doldurması gerektiğini söylüyor.

Sınır görselleri de tıpkı köşelerde olduğu gibi sınır başına tanımlanabiliyor. Bu sayede her bir sınır için farklı görseller kullanılabilmesinin de önü açılmış oluyor.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Bu özellik Firefox 3.1, Safari ve Chrome’de destekleniyor. Özellik ayrıca Blog.SpoonGraphics üzerinde de kullanılmış.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da border-image
• Firefox üzerinde border-image

3. Kutu ve Metin Gölgeleri

box-shadow

Gölgeler: Gölge efektini hanginiz sevmiyorsunuz ki? Bu efektler bir web tasarımını doÄŸru kullanıldığında çok güzel, yanlış kullanıldığında da çok kötü yapabilirler. Åžimdi, CSS3 ile birlikte gölge efekti oluÅŸturmak için Photoshop’a bile ihtiyacınız olmayacak. Bugüne kadar bu özelliÄŸi sitelerinde kullanmaya cesaret edenler ortaya fena iÅŸler çıkarmadılar. ÖzelliÄŸin kullanımına güzel bir örnek olarak bu yıl yayımlanmaya baÅŸlayan 24 Ways websitesi gösterilebilir.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

İlk iki öznitelik gölgenin elementten ne kadar uzağa kadar esneyeceğini gösteriyor. Yukarıdaki kod örneğinde bu x ve y açıları için 10 px olarak belirtilmiş. Üçüncü öznitelik ise gölgenin bulanıklık seviyesini belirtirken son öznitelik ise gölgenin rengini tanımlıyor.

Bununla birlikte text-shadow özelliği aynı efektin metin üzerine de uygulanabilmesini sağlıyor.

text-shadow: 2px 2px 5px #ccc;

Şimdilik bu özellik Firefox 3.1, Safari, Chrome (sadece box-shadow) ve Opera (sadece text-shadow) üzerinde kullanılıyor. Örneğin kullanıldığı web sitesi ise 24 Ways.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da box-shadow
• W3C Taslağı
• CSS3.info’da text-shadow

4. RGBA ve Geçirgenlik İle Kolay Saydamlık

opacity

Web Tasarımında PNGlerin Kullanımı saydamlığı anahtar bir tasarım özelliği haline getirdi. CSS3 ile birlikte alpha ve geçirgenlik kurallarını kullanmak mümkün olacak.

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

İlk üç numara kırmızı, yeşil ve mavi renk kanallarına işaret ederken son değer ise saydamlık efektini verecek olan alpha kanalını belirtiyor.

Alternatif olarak geçirgenlik kuralı ile birlikte renk ve geçirgenlik değerlerini ayrı ayrı belirtmek mümkün olacak:

color: #000;
opacity: #0.5;

Bu özellik Firefox, Safari, Chrome, Opera (opacity) ve IE7 (opacity, sorunlu). Bu özellik yine 24 Ways sitesinde kullanılmış.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da RGBA
• Saf CSS GeçirgenliÄŸi

5. @font-face İle Özel Web Yazıtipleri

@font-face

Web üzerinde daima güvenle kullanabileceÄŸiniz yazıtipleri vardır: Arial, Helvetica, Verdana, Georgia, Comic Sans (hmm…) vs. Åžimdi @font-face CSS3 kuralı ile birlikte yazıtipleri çevrimiçi bir dizin üzerinden çaÄŸrılabilecek ve web üzerinde kullanılabilecek. Ancak bu özellik telif hakkı sorunlarını da beraberinde getireceÄŸinden ÅŸimdilik kullanabileceÄŸiniz sadece birkaç yazıtipi bulunmakta.

Bu özelliğin kullanılabilmesi için gereken kod şu şekilde olmalıdır:

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

Ardından font-family’nin geriye kalan öğeleri de günümüzde kullanıldığı ÅŸekilde kullanılmaya devam edecektir.

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif; }

Bu özellik Firefox 3.1, Safari, Opera 10 ve IE7 (çok sorunlu, eÄŸer kendinizi yeterince cesur hissediyorsanız o zaman IE üzerinde font-face’i çalıştırmayı deneyebilirseniz) üzerinde çalışıyor. Bu özelliÄŸi kullanan bir web sitesi olarak TapTapTap gösterilebilir.

Ayrıca bakınız:

• font-face ile kullanılabilecek yazıtipleri
• IE’de font-face’i kullanmak
• Web yazıtipleri, bir sonraki büyük ÅŸey – A List Apart

Her ne kadar CSS3 halen geliÅŸtirme aÅŸamasında olmasına raÄŸmen burada listelenen kurallar daha ÅŸimdiden bazı tarayıcılar tarafından desteklenmektedir. Özellikle Safari‘nin bu yeni özellikler için tam desteÄŸi bulunuyor. Ancak ne yazık ki, bence dünyanın en iyi tarayıcısı olmasına raÄŸmen Safari’nin kullanıcı sayısı halen çok deÄŸil bu sebeple bu özellikleri sırf Safari kullanıcıları için eklemek, en azından ÅŸimdilik pek mantıklı bir çözüm deÄŸil. Ancak Apple’ın Mac bilgisayarlarının kullanım oranının gün geçtikçe günlük hayatımıza girmesi ile birlikte Safari’nin de kullanım oranı önemli ölçüde artacaktır.

Firefox da öte yandan Ä°nternet kullanıcılarının %20′den fazla bir kesimini içeriyor. Daha da önemlisi, pek yakında yayımlanacak olan Firefox 3.1 pek çok CSS3 özelliÄŸini de destekliyor. Firefox kullanıcılarının pek çoÄŸunun tarayıcılarını güncelleyeceÄŸini varsayarsak, bu tip yeni stilleme kurallarını destekleyen tarayıcıları kullanan kullanıcıların sayısı önemli ölçüde artacaktır.

Google Chrome ise bu yıl içerisinde yayımlandı. WebKit iÅŸleme motorunu kullanan Chrome, aynı iÅŸleme motorunu kullanan Safari ile aÅŸağı yukarı aynı özelliklere sahip. Safari özellikle Mac kullanıcıları arasında popülerken, Chrome’nin de piyasaya giriÅŸ yapması ile Windows kullanıcıları arasında popülerlik kazanmaya baÅŸlıyor.

Yüzde bazında W3′ün tarayıcı istatistiklerine göre Kasım 2008 itibarıyla W3School kullanıcılarının %44.2’si Firefox, %3.1′i Chrome, %2.7’si ise Safari kullanıyor. Bunun diÄŸer anlamı ise bu yeni özellikleri Ä°nternet kullanıcılarının %50’sinin görebilecek olması. Özellikle web tasarım komünitesi içerisinde, ki bu kesim tarayıcı seçimi konusunda daha özenli davranıyor, CSS3 desteÄŸine sahip tarayıcıların kullanım oranı %73.6‘ya kadar çıkıyor (Blog.SoonGraphics‘e göre).

6. Kötü yanları

Web siteniz artık pek çok güzel tasarım özelliğine kavuşmuş olabilir, ancak bu özellikleri kullanırken daima aklınızın bir köşesinde tutmanız gereken bazı kötü tarafları da yok değil:

• Internet Explorer: Ä°nternet kullanıcılarının %46’sı bu yeni özellikleri göremeyecek, o yüzden bu yeni özellikleri web sitenizin hayati önem taşıyan bölümlerinde kullanmayın. Ä°kincil tercihlerin de CSS kodunuz üzerinde oluÅŸturulmuÅŸ olmasına dikkat edin.
• DoÄŸrulanmamış Stil Åžablonları: Bu CSS3 özellikleri henüz son hallerine ulaÅŸmış deÄŸiller. Åžimdilik bazı tarayıcıları hedefleyen etiketlerle birlikte kullanılabiliyor. Bu özellikler, CSS stil ÅŸablonunuzun doÄŸrulanmaması ile sonuçlanabilir.
• Fazladan CSS Kodlaması: Son maddenin devamı olarak her bir tarayıcıda aynı kuralı uygulamak için tarayıcıları ayrı ayrı etiketlemenin yanısıra CSS derlemesinin son kodunu da sitenize eklemek, CSS kodunuzun uzamasına yol açacaktır.
• Potansiyel Olarak Berbat Kullanımlar: Tıpkı Photoshop filtrelerinin berbat kullanım örneklerine rastladığımız gibi bu yeni stilleme özelliklerinin kötü kullanımı sonucunda da ortaya berbat web siteleri çıkabilir. Özellikle gölge efekti daha ÅŸimdiden kulaklarımın çınlamasına yol açıyor. Özellikle kurumların pazarlama departmanlarının bu özelliÄŸi ne derecede kullanmak isteyebileceklerini düşünmek istemiyorum.

• Kaynak: Bildirgec - Smashing Magazine