bildirgec.org

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

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

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-image3. Kutu ve Metin Gölgeleri

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-shadow4. RGBA ve Geçirgenlik İle Kolay Saydamlık

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ği5. @font-face İle Özel Web Yazıtipleri

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 ApartHer 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: Smashing Magazine* Yazılarımı RSS İstemcisi Üzerinden Takip Etmek İçin Buraya Tıklayın* @pinkfloyd twitter* pinkfloyd köşesiCSS / CSS3 İle İlgili Yazdığım Diğer Yazılar
* Sizi CSS3 İle Tanıştıracak 5 Teknik* En Çok Kullanılan CSS Sınıf (Class) İsimleri* CSS’yi Öğrendiniz, Peki Ya Sonra?* Çevrimiçi CSS Araçları Listesi* Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları* 960.gs CSS Çatısına Yakından Bakış* CSS’de Uzman Olmanızı Sağlayacak 20 CSS Dersi* CSS’de Yardıma İhtiyacınız Olduğunda Kullanabileceğiniz 10 Kaynak* Öğrenilmesi Gereken 15 CSS Hilesi* Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği* Modern CSS’de Altın Oran* Web Tasarımında Altın Oran* BluePrint CSS Çatısını Kullanmak* SenCSs: Anahat Dışındaki Herşey İçin CSS Çatısı