Color, özelliği CSS’teyazı rengi, arkaplanrengi, kenarlık
rengi gibi bir çok alanda kullanılmaktadır. CSS3 ile birlikte renk efektleri
gelişmiş ve daha esnek bir yapıya kavuşmuştur. Renk işlemlerinde saydamlık
vermek için RGBA() renk fonksiyonu kullanılmaktadır. Bu fonksiyon ilk üçü RGB
renk yoğunluve sonuncusu da Alpha (saydamlık)değeri olmak üzere 0-255 arası
değerler almaktadır. Alpha değeri 0-1 arasında değişir ve 0 olduğunda görünmez
yani saydam 1 olduğunda da tam görünürdür. Bu değer ayarlanarak saydamlık
gerçekleştirilir.
Aynı saydamlık olayını istersek
opacityözelliğiyle de verebiliriz.
Gradients, özelliği arkaplanrengini biçimlendirme de
kullanılmaktadır linearve radialolmak üzere iki çeşittir. CSS3 ile birlikte
gelen bu renk efektleri birden fazla rengin tanımlandığı gelişmiş bir görsellik
sunmaktadır.
Shadows, özelliği yazı ve kutuların (div)
gölgelendirnesindekullanılmaktadır text-shadow(yazıya gölge) ve box-shadow(kenaralık gölge) olmak üzere iki
çeşittir.
2D transform, özelliği nesneleri iki boyutlu olarak hareket
ettirmeye ve düzenlemeye yarar. Birden fazla özelliği bulunmaktadır.
Kullanım şekilleri :
transform:rotate(-20deg);
Özellikleri,
3D transform, özelliği nesneleri üç boyutlu olarak hareket
ettirmeye ve düzenlemeye yarar. İki boyutluda kullanılan çoğu özellik burada
kullanılır.
Kullanım şekilleri :
transform:rotateX,rotateY, rotateZ(-20deg); olmak üzere üç
adet döndürme özelliği vardır.
Transitions, özelliği nesnelere hareket efekti vermekte
kullanılır. Efekt uygulanabilmesi için nesnelerin özelliklerinin iki farklı
değeri belirli olması gerekir. Genellikler bir değer (başlangıç değeri)
standart CSS kodunda verilirken, diğer değer(bitiş değeri) üzerine gelindiğinde
(hover) CSS özelliğinde tanımlanır.
Kullanım şekilleri :
transition:efek_tipiEfektin_süresi;
Özellikleri;
transition-timing-function: Efektin nasıl uygulanacağını
zamanlama ayarının nasıl olacağını belirlemede kullanılır. Örnek olarak efekt
başta hızlı, sona yaklaştıkça daha yavaş olabilir. Alacağı değerler şunlardır:
linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
bir sonraki dersimizde görüşmek üzere esen kalın... ebi
yararlanılan kaynaklar:
Hiç yorum yok:
Yorum Gönder