CSS3 ile birlikte bir çok güzel özellik geldi. Bunlardan bir tanesi
CSS3 renk geçişi(gradient) özelliği. Bu özelliği uygulamamızda en
büyük etki CSS3 renk geçişini desteklemeyen İnternet Explorer için
filtre ile çözüm oluşturuyor olabilmemiz.
Uygularımızda CSS3 renk geçişini uyguladıkça filtre uygulamalarında
yaşanan sorunlar ortaya çıkmaya başladı. Daha önce bu konuda “İnternet Explorer’da Renk Geçişi Sorunu ve Çözümü” bir sorun ve çözümü
yazmıştım.
Bu seferki sorunu şöyle tanımlayabilirim. Renk geçişi uygulanan alanın
içindeki bir elemana position:absolute tanımı yapıp kapsayıcı eleman
dışına çıkarmak istediğimizde dışa çıkan kısım ie6/ie7 (ie7 beni
ilgilendiriyor artık :) görünmüyor.
Araştırdığım kadarı ile bir çözüm yok. Bulabilen varsa yazarsa çok
sevinirim. Ben kaçak bir çözüm buldum :D
ie7 için filtre tanımı kaldırarak sorunu giderdim. Ancak diğer ie
sürümlerin için bir çözüm oluşturmam gerekti. Bunun için -ms-filtre
özelliğini kullanmak bana mantıklı geldi. İnternet Explorer 7’nin %5’in altına düşmüş oranı ile görmezden gelinebileceğini düşünüyorum. :D
IE7 masum görünüyor ama bizi uğraştırmıyorda değil. Yakınsa son bulacak
olması bizi sevindiriyor.
Webkit ekibinin ilk olarak 2008 yılında CSS’e kattığı bu özellik daha
sonra w3c tarafından standartlara girdi. HTML elemanlarını döndürmek,
boyutlandırmak, eğmek gibi eylemleri gerçekleştirmemize yarıyor. 2d
Transform özelliği 3d’ye göre tarayıcı desteği konusunda çok avantajlı.
2B Dönüştürme özelliklerini ie9+ desteklerken, 3B Dönüştürme
özelliklerini henüz betası çıkmış olan ie10+ destekliyor.
Bu makalede CSS3 transform 2 Boyutlu Dönüştürme konusunu inceleyeceğiz.
3 Boyutlu Dönüştürme konusuna daha sonra değineceğim.
2 Boyutlu Dönüştürme(2d Transform)
CSS 2d Transform özelliği iki boyutlu düzende elemanları dönüştürmeye
olanak sağlıyor. Tabi böyle tanımlama yaparak anlamak zor en kolayı
özellikleri tanımlayıp örnek yapmak.
Dönüştürme tanımları 3 bölümde inceleniyor.
transform Özelliği
transform-origin özelliği
Dönüştürme fonksiyonları (transform özelliği değerleri – translate,
rotate, scale ve skew)
Aslında transform özelliği ve değerleri bir kabul edilirse iki adet
genel tanımımız var. Bu özellikler bize çok büyük kolaylık sağlıyor.
Dönüştürme özellikleri desteğini her tarayıcı kendi ön eki ile
sağlamaktadır. Ben burada tanımlamalarımı standart olan özellik ile
göstereceğim, tabi örneklerde tüm tarayıcı kodlarını kullanacağım.
transform Özelliği
transform özelliği none, bir veya daha fazla transform değeri alır.
Genel kullanımı
Yapısı : transform: none | <dönüştürme-fonksiyonu>[<dönüştürme-fonksiyonu>]* Aldığı Değerler : [ none | matrix | translte | translateX | translateY | scale | scaleX | scaleY | rotate | skew | skewX | skewY ] Başlangıç değeri: none Uygulanabilen elementler: tüm elementler Kalıtsallık: Yok
Aldığı değerleri dönüşüm fonksiyonları bölümünde detaylı bir şekilde
inceleyeceğiz.
Uygulandığı paragrafı kendi orijin noktasına göre 75px sağa ve 150px
aşağıya öteleyecektir. Göreceli bir tanımda(örn: % gibi) referans olarak
elemanın kapsayıcısını değil kendi orijinini alacaktır.
transform-origin Özelliği
Dönüşümün orjin olarak nereye referans alacağını tanımlamamızı sağlar.
Yapısı : transform-origin: deger deger Aldığı Değerler : [ [ [ <yüzde> | <değer> | left | center | right ] [ <yüzde> |<değer>|top|center|bottom]?]<değer>?]|[[[left|center| right ] || [top | center | bottom ] ] <değer>? ] Başlangıç değeri: 50% 50% Uygulanabilen elementler: tüm elementler Kalıtsallık: Yok
Başlangıç değeri olarak 50% 50% gelir. Bu elemanın tam ortasını
gösterir.(Bundan dolayı elemanı ölçeklendirdiğimizde veya
döndürdüğümüzde elmanın ortasında göre işlem yapar.) Üstten 50% soldan
50%. Biz bu değeri değiştirebiliyoruz. Değer olarak CSS değerleri
tanımlanabilir. İlk değeri X ekseninden mesafesini, ikinci değer Y
sekseninden mesafesini tanımlar.
Yüzde değerlerinde referans olarak elemanın kutu alanı alınır.
Daha iyi anlamak için aşağıda da göreceğimiz döndürme(rotate)
uygulayarak görelim.
Yukarıda görsel olarak verilmiş örnekte kırmızı olanlar normal halleri,
gri olanlar ise dönüşüm uygulanmış hallerini göstermektedir. İlk eleman
başlangıç değeri olan center center uygulanmıştır, bu nedenle eleman
mutlak konumuna göre hareket etmiştir. İkinci eleman left center
tanımlanmıştır, bu nedenle eleman sol tarafın dikey ortasına göre
dönmüştür. En son örnekte 100% 50% tanımı yapılmıştır, bu nedenle bu
örnek sağ tarafa dualı dikeyde ortalı bir şekilde döndürülmüştür.
Dönüşüm Fonksiyonları
Dönüşüm fonksiyonlar translate(değiştir - dönüştür), rotate(döndürme),
scale(ölçeklendirme) ve skew(eğme) olmak üzere 4 adettir. Birde rotate
hariç bunların X ve Y için ayrı tanımlarıda var. Aşağıda detaylı
incelemede göreceğiz.
translate(değiştir - dönüştür)
CSS3 sayesinde javascript veya flash’a gerek kalmadan animasyon veya
dönüştürme işlemlerini yapabiliyoruz. Biz burada bir CSS3 transform
özelliği ile nasıl sayfa içindeki elemanları taşıyacağımızı göreceğiz.
translate değeri elemanı bir noktadan başka bir noktaya taşımamızı
sağlıyor.
Bu sayede biz elemanı orijinal konumundan x-ekseninde soldan mesafesi ve
y-ekseninde üstten mesafesini tanımlayarak taşıyabiliyoruz. Basit bir
kullanımı vardır.
Bir örnek yapalım;
- Eksene Özgü Yöntemler
Elemanları sadece bir eksen hareket ettirmek için translateX ve
translateY özelliklerini kullanabiliriz.
Yukarıdaki örneği
aynı şekilde y ekseninde hareket için
şeklinde uygulanabilir.
- Animasyon Yardımlı Örnek
İleride göreceğimiz transition özelliği yardımı ile ufak bir kod ile
animasyon oluşturabiliriz. Hem translate özelliğini daha iyi anlamış
oluruz.
Fare imlecinin mavi alan üzerine getirdiğimizde animasyonlu bir şekilde
kutu translate komutu ile atadığımız yeni yerine hareket edecektir.
İleride CSS3 transition konusunda daha detaylı göreceğiz.
rotate(Döndürme)
rotate değeri yardımı ile sabit bir noktaya göre elemanı belirlenen açı
ile döndürebiliyoruz. Bu sabit nokta transform-origin tanımı ile
değiştirilebiliyor.
Bir örnek ile konuyu daha iyi anlayalım.
Yukarıdaki kod ile tanımlanan HTML elemanını 45 (deg-degrees)derece
döndürdük. Saat yönüne çevirdiğimiz gibi, eksi değer vererek saat
yönünün tersinede döndürme işlemi yapabiliyoruz.
Döndürme tanımlarında 4 adet değer var. deg(açı), grad(gradyen),
rad(radyen) ve turn.
turn değerini biraz daha inceleyelim. turn değeri dairenin etrafını
gösteriyor.
0.5 olarakta tanımlanabilecek bu değer elemanımızı yarım daire kadar
döndürecektir.
- Animasyon Yardımlı Örnek
Bir örnekte animasyonlu yapalım.
Yukarıdaki örnektede görüldüğü gibi birçok güzel uygulama bu yöntem ile
yapılabilir.
scale(Ölçekleme)
scale değeri yardımı ile belirlene elemanın X ve Y ekseninde ölçeğini
büyütebilir veya küçültebiliriz.
3 adet ölçeklendirme fonksiyonu vardır.
scale(<sayı>[, <sayı>])
scaleX(<sayı>)
scaleY(<sayı>)
Bir örnek ile konuyu daha iyi anlayalım.
Daha iyi bir anlatım için örnekte iki kutu kullandım birisi kutunun
normal hali(mavi kutu), diğer ise kutunun ölçeklenmiş hali(kırmızı
kutu). Altta kalan kutunun görünmesi için üstteki kutuya saydamlık
verdim.
- Eksene Özgü Yöntemler
Elemanları sadece bir eksen ölçeklemek için scaleX ve scaleY
özelliklerini kullanabiliriz.
Yukarıdaki örneği
aynı şekilde y ekseninde hareket için
şeklinde uygulanabilir.
- Animasyon Yardımlı Örnek
Bir tanede animasyonlu bir örnek yapalım.
skew(eğme)
skew ile eleman veya eleman gruplarına X ve Y eksenin için belirli
açılar verilerek eğiklik ve yamukluk elde edebiliyoruz. 3 adet skew
tanımımız vardır;
Eğiklik tanımı yaparken tek tanım yapabildiğimiz gibi iki tanım ile x ve
y için farklı açı değerleride belirleyebiliyoruz.
Bir örnek yapalım.
- Eksene Özgü Yöntemler
Elemanları sadece bir eksen eğmek için skewX ve skewY özelliklerini
kullanabiliriz.
Yukarıdaki örneği
aynı şekilde y ekseninde eğiklik için
şeklinde uygulanabilir.
- Animasyon Yardımlı Örnek
Bir tanede animasyonlu bir örnek yapalım.
Çoklu Değer Kullanımı
Dönüşüm fonksiyonları yukarıda tanımladığımız gibi tek tek
tanımlanabildiği gibi kısaltma olarak arada boşluk bırakılarak
birliktede tanımlanabilir.
Böylece kodlamamızda bayağı bir kısaltmaya gitmiş oluruz. Çoklu tanım
uygulandığında bu fonksiyonlar soldan sağa doğru sırası ile
uygulanacaktır.
Matris Sistemi
w3c’nin geliştirmekte olduğu matris sistemi ile transform tanımı
yapımı karmaşık bir yapıya sahiptir. Muhtemelen kullanmayacağımız bir
yapı yada belirli araçlar ile oluşturulacak bir kod yapısına sahip.
Dönüştürme fonksiyonlarının her biri matriste kendine bir yer edinerek
oluşturulan değerdir. Örneğin scale(1.5,1.2) tanımı matris olarak
aşağıdaki şekilde gösterilir
CS3 bize birçok kolaylık sağlamaktadır. Bununla birlikte kodlama biraz
karmaşık hal almaktadır. Bu karmaşayı engellemek amacı ile de çeşitli
araçlar geliştirilmektedir. CSS3 2B dönüştürme için
http://westciv.com/tools/transforms/index.html sayfasındaki araç
kullanılabilir. Bize bir çok bakımdan kolaylık sağlayan bir araç,
denemeye değer.
Tarayıcı Destekleme Listesi
Firefox 3.5+ (-moz- öneki ile)
Chrome 10+ (-webkit- öneki ile)
Safari 3.2+ (-webkit- öneki ile)
Opera 10.6 (-o- öneki ile)
İnternet Explorer 9+ (-ms- öneki ile)
Mobil Tarayıcılar
iOS Safari 3.2+ (-webkit- öneki ile)
Opera Mobile 11+ (-o- öneki ile)
Android Browser 2.1+ (-webkit- öneki ile)
CSS3 ile web sayfası öğelerinin görünümünü değiştirebileceğimizi gördük.
Daha önce javascript yardımı ile yaptığımız bu işleri artık CSS3 yardımı
ile yapacağız. CSS3 ile yeni gelen bu özellikleri bazı sorunları olsa da
zamanla bu sorunlarında aşılması ile çok büyük bir kolaylıklar
sağlayacaktır.
CSS3 ile renk geçişi hakkında yazdığımız makalede İnternet Explorer
içinde çözüm üretmiştik. Uygulamada bazı durumlarda renk geçişinin
İnternet Explorer’larda çalışmadığını gördüm.
Biraz araştırınca bu sorunun hasLayout’tan kaynaklanan bir sorun
olduğunu gördüm.