CSS 3 Beni Çok Heyecanlandırıyor!

W3C, CSS3 için 4 yeni modül oluşturuduğunu duyurdu. Tamamen yeni olan bu özellikler daha önce Javascript-Flash ya da gif ile yapabildiğimiz şeyleri kısacık CSS kodlarıyla yapmamıza olanak sağlayacak.

CSS 3′ün Animasyon (Animation), Geçiş (Transitions), İki (2d) ve Üç Boyutlu (3d) Döndürme özellikleri gelecekte bir çok isteğimize cevap verecek ve işimizi kolaylaştıracak nitelikte görünüyor.

Animasyon (Animation)da yapılacak harket @keyframes anahtarıyla belirleniyor. Aşağıdaki örnekte animasyonun özelliklerini incelersek:

• “diagonal-slide” ismi verilmiş.
• Süresi 5 sn
• Tekrarlama sayısı 10
• (0,0) noktasından (100,100) noktasına gidiyor.

div {

animation-name: 'diagonal-slide';animation-duration: 5s;animation-iteration-count: 10;

}@keyframes 'diagonal-slide' {

from {left: 0;top: 0;}

to {left: 100px;top: 100px;}

}

Geçiş (Transitions) özelliği belirlenen bir sürede belirlenen bir değerden başka bir değere geçmeye yarıyor.

Değişiklik yapılabilecek özelliklerden bazıları: background, border, color, font, height, margin, opacity, padding, width, z-index

İki Boyut(2d) özelliği ise elemanları iki boyutlu uzayda hareket ettirmeye yarıyor.

Aşağıdaki kodu ve çıktısını görünce web sitelerinin geleceğinin ne kadar eğlenceli olabileceğini tahmin edebiliyorum:)

Kod 100px genişliğinde ve yüksekliğindeki bir div’i  80px sağa ve 80px aşağı hareket ettiriyor, genişliğini ve yüksekliğini 1.5 kat arttırıp 45 derecelik bir dönüş sağlıyor.

 div {

height: 100px; width: 100px;

transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);

}

Üç Boyut(3d) özelliği de tahmin edebileceğiniz gibi elemanları üç boyutlu uzayda hareket ettirmeye yarıyor.

Bu hareketi yaparken de bazı fonksiyonlardan yararlanıyor. Bunlardan bazıları:

• matrix(<number>, <number>, <number>, <number>, <number>, <number>) -> 2 boyutlu döndürme yapılan bir elemana belirlenen matris ölçülerinde döndürme yaptırır.
• translate(<translation-value>[, <translation-value>]) -> 2 boyutlu döndürme yapılan bir elemana belirlen vektör elemanlarına göre döndürme yaptırır.
• scale(<number>[, <number>]) -> 2 boyutlu ölçeklendirme  yapılmış elemana verilen parametreler doğrultusunda 3. boyutta ölçeklendirme yaptırır.
• rotate(<angle>) -> 2 boyutlu döndürme yapılan bir elemana açıyla belirleyerek döndürme hareketi yaptırır.

Tüm fonksiyonları incelemek için konunun ilgili bölümüne göz atabilirsiniz.
Okuduğum kadarıyla CSS3′ün hareketlilik konusunda getireceği yenilikler hakkında anladıklarımı paylaşmaya çalıştım. Henüz uygulamasını yapamadığım için eksiklerim vardır, ama bu kadarı bile hayalgücümü zorlamaya ve beni heyecanlandırmaya yetiyor:)

Ne yazık ki CSS3′ün özellikleri tüm tarayıcılar tarafından henüz desteklenmiyor. Tam destek için önümüzde 3-5 yıl olabileceğini tahmin ediyorum. Özellikle bu yarışta Internet Explorer’ın çok çaba sarfetmesi lazım.

Umarım tarayıcıların CSS3 desteği benim öngörümden daha kısa zamanda tamamlanır da kodlamanın da tadından yenmez:)

CSS3 ile ilgili daha fazla bilgi almak isterseniz aşağıdaki sitelere de bir uğrayın derim:

• CSS3′e giriş: W3C resmi CSS3 tanıtım sayfası (İngilizce)
  
• Border, background, color, Text efektleri… hakkında CSS3 uygulamaları (İngilizce)
• CSS3 ile yapılabileceklere değinen Türkçe makale
• CSS3 ile sizi tanıştıracak 5 uygulama (Türkçe çeviri)
• Web tasarımlarınız CSS3 ile geleceğe hazırlayın (Türkçe çeviri)