CSS’in transition (geciş) ozelliği ile nasıl animasyonlar hazırlayacağımızı oğrenmiştik. Bu makalemde ise JavaScript desteği ile sayfaya girildiğinde otomatik olarak renklenen başlıklar hazırlayacağız. İşin guzel kısmı ise bunu hicbir gorsel kullanmadan yapacak olmamız.

Hazırlık

Bildiğiniz gibi CSS kodları tagları icerisine koyuluyor.

Burada kilit nokta aşağıdaki kodları sırasıyla sitenize yerleştirmeniz.

CSS tahmin edebileceğiniz gibi en ustte, html kodları ise icerisinde herhangi bir yerde ve son olarak JS kodları da html kodlarının altında.

Bu karmaşanın onune gecmek icin genel bir orneğin kodlarını makalenin en altında paylaşıyorum.

Web sayfamızın CSS kodlarına aşağıdaki satırları ekliyoruz

Kod:
body span

HTML kodlarımız ise bunlar :

Kod:
Adobewordpress.com


Son olarak JS Kodlarımız :

Kod:


Genel Ornek

CSS, JS ve HTML kodları icinde kaybolanlar icin hepsinin hazır olduğu genel bir sayfa yapısı paylaşmakta fayda var Aşağıdaki kodları herhangi bir HTML dosyasına yapıştırarak calışabilirsiniz.

Kod:
Adobewordpress.com


Renkli ve ozgun bir başlık tipi oluşturmak bu kadar basit.

Bir sonraki makalemde goruşmek uzere…

Test : http://www.adobewordpress.com/wp-content/uploads/test/16.html

Kaynak : http://www.adobewordpress.com/animasyon-ile-metin-renklendirme/