CSS3 plan modülleri hala üzerinde çalışmaya devam edilen yapılardır. CSS3 plan yapılarını kökten değiştirecek ve ihtiyaçları tam karşılayacak şekilde değişikliklere gidiyor. Henüz gelişme aşamasındaki bu yaklaşımlar hakkında biraz bilgi sahibi olalım. Daha önce bahsettiğimiz ve burada genel manası ile sizlere bahsedeceğim modüller var. Daha önceki makalelerimde çoklu kolonlar(multi column layout) ve Esnek kutu yerleşimi(flexible box layout) konularını ilgili makalelerinden daha detaylı bilgiyi edine bilirsiniz.
CSS3 Çoklu Kolonlar(multi column) Modülü
Bu modülün tamamlanmış ve tüm yeni nesil tarayıcılar tarafından desteklenmiş olması güzel bir a. CSS3 plan modülleri arasında öğrenilmeye başlanacak en iyi modüldür.
CSS ızgara modülünü Microsoft önerdi ve şu an kararlı bir şekilde çalışıyor. İnternet Explorer 10 ile test edebileceğimiz bir modül.
Izgara Düzeni; sayfa veya uygulamaları büyük bloklara bölmeye yarayan bir modüldür. Bu bölme işlemi tablo düzeni gibi satır ve sütunlara bölerek yapar.
Tablo kullanımına benzese de herhangi bir fiziksel html elemanına(table, td ve tr gibi.) ihtiyacı olmaması farklı çözünürlükteki araçlar uyumlu yapıları olmasını sağlıyor.
CSS3 Bölgeler modülü Adobe tarafından üretilip w3c’ye önerilen bir modül. Tarayıcı desteği konusunda sıkıntılı bir modül. Sadece İnternet Explorer 10’un desteği var şu an. Karışık yapılı planlamaları karşılayabilecek bir modül. Dergi ,gazete ve test kitabı benzeri planlamalar için gayet başarılı bir modül. Bu modülü kullanarak çok çekici sayfalar oluşturulabilir.
Web alemi geliştikçe ve farklı mecralara yayıldıkça farklı sayfa planlarına ihtiyaç duyulmaktadır. CSS3 bu konuda çabalıyor, ancak bana göre tüm isteklere bir çözüm bulmak zor. CSS3’ün bir çok yeni özelliği tarayıcılar tarafından desteklenmekte iken bazı planlama modülleri destek ve gelişme açısından geride kalmaktadır.
Ben daha önce desteği fazla olan çoklu kolan ve esnek kutu modelini anlatmıştım. Izgara modülü, Bölgeler ve İsitisnalar modülleri henüz yeterliliklerini kabul ettiremedikleri için sadece biraz bahsedip geçtim. İleride bu modüller gelişip desteğini arttırırsa detaylı yazılarını yazabilirim.
Bir önceki yazımda CSS3 geçiş efektlerini anlatmıştım. CSS3 animasyon özellikleri geçiş efektlerine benzer özellikleri ve daha fazlasını içermektedir. Animasyon işleri ile daha önce uğraşanlar için çok tanıdık kodları var. CSS3 Animasyon özelliği; javascript veya flash olmadan bize animasyon yapma imkanı sağlamaktadır.
Animasyon tanımlarında tanımlamalar ve zamanlama önceden yapılır sonra uygulanacak elemana tanımlanır.
CSS3 animasyon özelliğini ie10 hariç ön ek ile desteklemektedir. Ben buradaki örneklerde öneksiz göstereceğim.
Anahtar Kare (Keyframes)
Daha önce flash ile uğraşmış insanlara yabancı olmayan bir kavram. Animasyonu bir süreç olarak kabul edersek, anahtar kare(keyframe) bize geçişin başlangıç ve bitişi arasındaki durumları tanımlamamız için olanak sağlar.
@keyframes Kuralı
CSS3 anahtar kare(keyframe) tanımı bir @kuralı olarak tanımlanır. Normal CSS tanımları içerir, ancak farklı olarak tanımlayıcı bir isim ve her kareye bir tanım yapmamızı sağlayan bir yapıya sahiptir.
animasyom_ismi tekil bir tanımıdır, daha sonra elemente animasyon uygulamak istediğimizde kullanılmak üzere.
Yukarıdaki kod ile ‘soldanGelen’ animasyonumuza üç adet anahtar kare(keyframe) oluşturmuş olduk. Animasyonumuzun 0%, 50% ve 100%’ün de anahtar kare (frame) meydana getirmiş olduk. Her kare’de(frame) elemana istediğimiz animasyonu uygulayabiliyoruz.
Ayrıca (0% - 100%) kullanımı yerine (from - to) kullanımıda vardır.
Animasyon Özellikleri
Anahtar kare(keyframe) tanımından sonra animasyon özellikleri tanımlarına geliyor sıra. Bu özellik tanımları CSS tanımlarına benzer bir yapısı vardır. Aşağıda bunları tek tek inceleyelim.
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-delay
animation-play-state
animation-fill-mode
animation
Animasyonun adı (animation-name)
Yapısı : animation-name: <single-animation-name> Aldığı Değerler : none | IDENT [, none | IDENT ]* Başlangıç değeri: none Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Bir elemana animasyon uygulayacağımız zaman ilk olarak bir isim tanımlamamız gerekiyor.
Tek değer alır ve tanımlanan değer yukarıda belirttiğimiz gibi anahtar kare’ye parametre olarak eklenir. Bunun dışında none değeride alır. Animasyon ismini tırnak içinde yazınca Firefox’da çalışmıyor.
Animasyonun zamanı (animation-duration)
Yapısı : animation-duration: <zaman> [, <zaman>] Aldığı Değerler : <zaman> [, <zaman>] Başlangıç değeri: 0s Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Animasyonun ne kadar süreceğini belirtmek için bu özelliği kullanırız.
Animasyonun 3 saniye devam edeceğini gösterir. Daha önce gördüğümüz transition-duration özelliğine benzer bir özelliktir. Zaman değerleri alır; ms, s ve 0 değerleri alır.
Zamanlama fonksiyonu (animation-timing-function)
Yapısı : animation-timing-function: <single-timing-function> [ ‘,’ <single-timing-function> ]* Aldığı Değerler : ease | linear | ease-in | ease-out | ease-in-out | cubic- bezier(<number>, <number>, <number>, <number>) Başlangıç değeri: ease Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Geçiş efektlerinde benzer diğer bir tanımı animation-timing-function tanımıdır. transition-timing-function özelliğine benzer bir özelliktir.
Aldığı değerler ease, linear, ease-in, ease-out, ve ease-in-out
Animasyonun esnek bir şekilde meydana gelmesini sağlar.
Animasyonun tekrar sayısı (animation-iteration-count)
Yapısı : animation-iteration-count: <single-animation-iteration-count> [ ‘,’ <single-animation-iteration-count> ]* Aldığı Değerler : infinite | <sayı> Başlangıç değeri: 1 Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Bu tanım animasyonun kaç kere tekrarlanacağını belirler.
animation-iteration-count tanımı tüm pozitif rakamları alabilir. Animasyonun daimi olarak devam etmesini istiyorsak infinite değerini atamalıyız. Başlangıç değeri 1’dir.
Animasyonun yönünü (animation-direction)
Yapısı : animation-direction: <single-animation-direction> [ ‘,’<single-animation-direction> ]* Aldığı Değerler : normal | reverse | alternate | alternate-reverse Başlangıç değeri: normal Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Animasyonlar normalde başlangıçtan sona doğru hareket eder. Bazen ise bu akışı tersine çevirmek isteriz. Animasyonun yönünü belirleye biliyoruz, ileri doğru veya tersine aksın diyebiliyoruz.
Başlangıç değer normal olarak tanımlıdır. Aldığı değerler
normal Animasyon her çalışmadan baştan sona doğru çalışır. Yani animasyonun her döngüsünde baştan başlayacak. Bu özelliğin başlangıç değerdir.
alternate Animasyon sondan başa hareket eder. Animasyon terse oynarken her adımı geri doğru hareket eder. animation-timing-function foksiyonuda tersine döner, yani ease-in tanımlı ise bu tanım yapıldığında animasyon ease-out şeklinde oynayacaktır. Animasyon tekrar sayısı tanımlı ise, her tek ve çift sayı için bu durum tekrar edecektir.
reverse Animasyon her döngüde geriye doğru oynar. Animasyonun her döngüsünde sondan başa hareket eder.
alternate-reverse İlk döngüde sondan başa, sonra baştan sona doğru hareket eder. Animasyon tekrar sayısı tanımlı ise, her tek ve çift sayı için bu durum tekrar edecektir.
Örneğe devam;
Animasyonu tersine çevirecektir. Metin sağdan sola değil, soldan sağa doğru gelecektir.
Animasyona ara verme (animation-delay)
Yapısı : animation-delay: <zaman> [, <zaman>] Aldığı Değerler : <zaman> [, <zaman>] Başlangıç değeri: 0ms Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
animation-delay tanımı animasyonun başlamadan önce belli bir süre bekletmemizi sağlar.
Tanımı ile animasyon tetiklenmesinden itibaren 4 saniye sonra başlayacaktır. Bu tanım pozitif ve negatif rakam alabilir. Pozitif değerler animasyonu bekletirken, negatif değerler atandığında animasyon hemen başlayacak ve belirlenen saniyeden sonra görünmeye başlayacaktır.
Animasyonu Durdurma (animation-play-state)
Yapısı : animation-play-state: <single-animation-play-state> [ ‘,’ <single-animation-play-state> ]* Aldığı Değerler : running | paused Başlangıç değeri: running Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Diğer bir animasyon özelliğide animation-play-state özelliğidir, animasyon yürütme kontorolünü yapar. İki değer alır; çalıştır(running) veya durdur(paused). Bir animasyonu durdurmak için
Tanımını yapmamız yeterlidir. Örneğimizde elemanın üzerine geldiğimizde animasyonun durdurmak için
Tanımını eklememiz yeterli olacaktır. Bu özelliğe javascript ile erişerek daha dinamik örnekler oluşturabiliriz.
animation-fill-mode
Bu özellik animasyonun bitiminden sonra veya animation-duration ile belirlenen zaman sırasında nasıl davranacağını belirler. animation-fill-mode aşağıdaki değerleri alır.
none başlangıç değeridir — Başlangıç değeri olarak kullanılan bu değer ile animasyon bittikten sonra geri dönmesini sağlar ve kendi tanımlarını alır. Animasyonun başındaki animation-duration ile tanımlanan zaman sırasında herhangi bir stil uygulanmaz.
forwards animasyon bittikten sonra; son anahtar karede animasyonda tanımlanan özellik korunur. none değerinde animasyonun başına dönerken, forwards tanımında son kare özellikleri korunarak kalır.
backwards Tanımlanan animasyon durdurma(animation-delay) zamanında, uygulanan animasyonun ilk karesindeki değer tanımlanır. none değerinde durdurma zamanında herhangi bir tanım almazken, backwards tanımında tanımlana animasyonun ilk kare özelliklerini alır.
both elemente forwards ve backwards aynı anda uygulanır. Hem animasyonun durdurma zamanında ilk kare özelliklerini alır, hemde son kare değerleri elemanda tanımlı kalır.
Yapısı : animation-fill-mode: <single-animation-fill-mode> [ ‘,’ <single-animation-fill-mode> ]* Aldığı Değerler : none | forwards | backwards | both Başlangıç değeri: none Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
animation-fill-mode özelliği animasyonun dışında hedef elemana uygulanacak stillerin nasıl uygulanacağını tanımlar.
Bu özellik sayesinde bazı kesilme ve garip atlamaları engelleyebiliriz. animation-fill-mode özelliğini kullanarak fazladan kod yazmadan bu tip sorunları engelleyebilirsiniz.
Animasyon Kısayolu(animation)
Yapısı : animation: <single-animation> [ ‘,’ <single-animation> ]* Aldığı Değerler : <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> Başlangıç değeri: animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-iteration-count: 1 animation-direction: normal animation-fill-mode: none Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Yukarıda animasyon özelliklerini tanımladık. Bu tanımları önek ile birlikte yazdığımızda bir sayfaya yakın bir kod yığını ortaya çıkmaktadır. Bu kod yığınını azaltmak için ve daha kısa kod yazmak için animation tanımı ile yukarıdaki tanımları azaltabiliriz. Bu tanımlama ile animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-delay ve animation-fill-mode tanımlarını tek bir tanım içine almış oluruz.
Örneğimiz göz önüne alırsak;
Tanımı yerine
7 satır kod tek satıra indi. Yukarıdaki sıra önemlidir; name, duration, timing function, count, direction, delay, and fill- mode. Her tanım birbirinden boşluk ile ayrılır. Sadece adı ve süresi yazılması gerekmektedir, diğer değerler isteğe bağlıdır.
Birden fazla tanımı virgül ile ayırırız.
Yerine
Javascript, Flash ve CSS3 Animasyon Avantaj ve Dezavantajları
Animasyon işini daha önce ve hala javascript ve flash ile yaparken şimdi niye css ile yapıyoruz diye akıllara gelebilir. Bu başlık altında javascript flash ve css3 ile animasyon yapımının avantaj ve dezavantajlarını inceleyeceğiz.
Flash Artıları
Animasyon oluşturmak için köklü ve sağlam bir Editöre sahip
Actionscript ile daha programatik ve güçlü bir animasyon yeteneğine sahip
Flash Eksileri
Mobil ortam desteğinin az olması.
Bir plugin bağımlılığı olması ve devamlı güncelleme istegi
Arama motorları ve ekran okuyucuları gibi cihazlardan erişememe sorun.
Javascript Artıları
Gelişmiş ve iyi animasyon frameworkleri
Web geliştiricilerin alışık olduğu HTML, CSS ve DOM öğeleri üzerinden işlem yapma
CSS’e göre daha avantajlı ve programatik güç ve esneklik.
Javascript Eksileri
Kullanıan frameworkler nedeniyle yavaşlık ve fazla HTTP isteği
Sözdizimindeki framework kullanım zorluğu
Javascript ile oluşturulan içeriğin arama motorlarının erişim sıkıntıları.
CSS3 Artıları
Bildik kullanım alanı
Standart CSS sözdizimi
Basit öğrenme
Javascripte göre daha yüksek frame oranları ve tarayıcıda daha hızlı ve esnek geçişler
Mevcut HTML elemanları üzerinde oynama imkanı ve SEO avantajı sayılabilir.
CSS3 Eksileri
Tarayıcı desteği bakımından sıkıntılar mevcut. (İnternet Explorer sorunu)
Animasyon araçları konusunda zengin bir alan yok, daha çok kod ile üretmek zorunluluğu var.
Animasyon Olaylarının Kullanımı
Animasyon olaylarını kullanarak animasyonlara ekstra özellikleri kazandırabiliriz. AnimationEvent nesnesini kullanarak animasyonun başladığını, bittiğini ve döngüsünü tespit edebiliriz. Javascript ile kare kare kontrolün olmaması bir sorun.
Animasyonu dinleyen bir fonksiyon
Tüm animasyon olaylarını dinleyen bir fonksiyon yaptık. İlk başlangıcı yakalamak için animasyonun uygulandığı sınıfı sonrada tanımlıyoruz. Olayları yakalamk için listener fonksiyonuna gönderiyoruz.
Tarayıcılara göre metot isimleri farklılık gösteriyor.
W3C standard - Firefox
webkit
Opera
IE10
animationstart
webkitAnimationStart
oanimationstart
MSAnimationStart
animationiteration
webkitAnimationIteration
oanimationiteration
MSAnimationIteration
animationend
webkitAnimationEnd
oanimationend
MSAnimationEnd
Tarayıcı Desteği
1.0+ (-webkit)
10+
4.0+ (-moz)
Mobil Tarayıcılar
2.1+ (-webkit)
2.0+ (-webkit)
36+
Sonuç
CSS3 animasyon özelliği CSS’in web’deki görselliği tek başına temsil etmesi açısından büyük bir adımdır. HTML elementlerine animasyon özelliği kazandırması gelecekte daha yaygın olarak kullanılmasına yol açacaktır. Basit ve genel kullanılan animasyonları normal CSS kodu yazar gibi kodlasak da daha gelişmiş animasyonlar için bir editör ihtiyacı ortaya çıkacağı kesindir. Bu konuda şimdi görünen en büyük editör Adobe’nin Egde aracıdır. Flash ile büyük bir bilgi birikimine sahip olan Adobe CSS3 animasyonuna da büyük destek sağlayacağı ortadır. Tabi rekabetin olması ve farklı araçların çıkması her zaman bizim gibi geliştiricileri için bir artıdır.
Ben sizlere burada işi teorisini açıklamaya çalıştım bilgileriniz geliştirmek için yapılmış animasyon örneklerini incelemeniz ve kendi animasyonlarınızı hazırlamanız önemli. Kaynak bölümündeki örnekleri incelemenizi öneririm.
CSS anlık geçişleri bünyesinde barındırıyordu. Birçok uygulamamızda bir
bağlantının üzerine geldiğinde bağlantının rengi değiştiriyor,
düğmemizin ardalan rengini değiştiriyorduk.
CSS3 ile birlikte ani geçişlere artı olarak yeni merhale merhale
geçişler eklenmiştir. Geçişler yavaş yavaş olduğu gibi uzun uzadıya
geçişlerde mevcuttur. Durumu daha iyi anlayabilmek için yukarıda
bahsettiğimiz gibi bir fare imlecinin bağlantı üzerine geldiğinde renk
değişmesini anlık değil merhale merhale değiştirelim.
Renk geçişi belli bir zaman aralığına yayılacaktır ve iki renk
arasındaki geçişte ara renkler görünecektir. Bu geçişe bazı efektlerde
ekleyebiliyoruz. Geçişin merhale merhale olması göze daha hoş
gelecektir.
Bu işleri daha önce flash veya javascript yapıyorken artık CSS3 yardımı
ile yapabilecek olmamız çok güzel bir gelişme. Basit tek satır
kod(farklı tarayıcılar için yazılan önekler zamanla teke inecektir.) ile
bu işi yapmak ayrı bir kolaylık tabi.
Transtion Özellikleri
Geçiş efektlerini uygulamak için aşağıdaki özelliklerden yararlanacağız.
transition-property
transition-duration
transition-delay
transition-timing-function
transition
Şimdi bu özellikleri tek tek inceleyelim.
Geçiş Efekti Hangi Özellik İle Yapılacağını Belirleme(transition-property)
Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını
belirlemek için transition-property özelliğini kullanırız.
Yapısı: transition-property: none | all | [ <IDENT> ] [ ‘,’ <IDENT>]* Aldığı Değerler: none | all | [ <IDENT> ] [ ‘,’ <IDENT> ]* Başlangıç değeri: all Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
Örneğin color değeri geçiş uygulanacak elemanın başlangıç ve son rengi
arasında bir geçiş olacağını gösterir.
all değeri tüm tanımlarda geçiş yapılacağı anlamındadır.
Geçiş Efekti Uzunluğunu Belirleme (transition-duration)
Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam
edeceğini ayarlayabiliyoruz. Bu ayarlamayı transition-duration özelliği
yapıyoruz.
Yapısı : transition-duration: <zaman> [, <zaman>]* Aldığı Değerler : <zaman> [, <zaman>]* Başlangıç değeri: 0 Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine Kalıtsallık: Yok
0 değeri geçişin hemen olacağı anlamına gelir. Eksi değerler 0 olarak
yorumlanır.
transition-delay
Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler.
Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.
Animasyonumuz 0.5 saniye sonra başlayacaktır.
transition-timing-function
Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan
fonksiyonlardır. CSS3 ile birlikte gelen transition efekti başlangıç
tanımı doğrusal bir geçiştir. Biz bu özelliğe ease, ease-in, ease-out,
ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz. cubic-bezier
tanımı ise geçişleri kendimize göre tanımlama imkanı veriyor. Kendi
zaman çizgimizi hazırlamak(cubic-bezier) biraz zor olsa da internet
üzerindeki bazı araçlar yardımı ile bu işte kolaylaştırılmıştır.
ile transition-timing-function özelliğini kullanmak bir zevk haline
geliyor.
transition kısayolu
Yukarıda tek tek ayrı ayrı her özelliği tanımlayabildiğimiz gibi teek
bir tannımlama ile bunları kısa bir şekilde tanımlamak da mümkün.
Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları
tek bir tanımda toplayalım.
Görüldüğü gibi kodumuz daha kısa bir hal aldı. bundan sonra bu şekilde
kullanmayı tercih edeceğim.
Çoklu Geçiş Kullanımı
Yukarıda yaptığımız gibi tek bir özellik üzerinden geçiş efekti
uygulayabildiğimiz gibi virgül ile ayırmak kaydı ile birden fazla geçiş
efekti de uygulayabiliriz.
Son örneğimizde arama alanına odaklandığımızda genişliğini ve ardalan
rengini geçiş efekti ile değiştirdi.
Geçiş Efektini Tetiklemek
Geçiş efektlerini tetiklemek için genelde :hover sözde sınıfı kullanılsa
da :active, :target, :focus gibi sözde sınıfları da kullanılabilir.
Ayrıca javascript ile DOM’a yapılan müdahaleler de buna eklenebilir.
Javascript ilede bu bağlantıya tetikle diye bir sınıf tanımlayalım.
Javascript ile Geçişin Bittiğinin Kontrolü
Javascript ile geçiş efektinin bittiğini kontrol etmek çok basit.
Geçiş efekti tamamlandığında transitionend foksiyonunu tetkilyecektir.
Tarayıcı Uyumu
CSS3 ile gelen bir çok özellik gibi geçiş efekti özelliklerinin de önek
ve internet explorer sorunları mevcuttur.
Tarayıcı Desteği
1.0+ (-webkit)
10+
4.0+ (-moz)
Mobil Tarayıcılar
2.1+ (-webkit)
3.2+ (-webkit)
36+
İnternet Explorer 10 ile gelen geçiş efekti desteğini öneksiz
eklemiştir. Şu an aktif olarak kullanılan ie8 ve ie9 sürümlerinde bu
özelliğin olmaması mevcut sitelerimizde bu özellikleri kullanmamız
önündeki en büyük engeldir.