CSS3 Transition Özelliği: Opaklık ve Hover Ayarları

Yeni tasarımların CSS dökümlerin de bu özellik gözüme çarptı biraz araştırdıktan sonra özelliğin ne olduğu ve ne işe yaradığını buldum.Bu özelliğimizi sizinle paylaşmak istiyorum.

Bu özelliğimiz hover efektlerimizi aniden değilde animasyon şeklinde (yavaşça) gerçekleştiriyor. Transition özelliği ile tasarımlarımız göze daha cazip geliyorlar.

Renk Değiştirme Özelliği

-webkit-transition: color 1s ease-in-out;  /* Chrome ve Safari */
-moz-transition: color 1s ease-in-out;     /* Mozilla */
-o-transition: color 1s ease-in-out;       /* Opera */
transition: color 1s ease-in-out;          /* Standart CSS3 Kodu */
color:red;                                 /* Renk Seçeneği */

Kodlarımız arasında bulunan:

"color" kodu renk değişimi için
"1s" kodu değişim süresi için
"ease-in-out" kodu ise değişimin içeriden(in) ya da dışarıdan(out) değişimini ayarlamak için kullanabiliriz.

Opaklık Değiştirme Özelliği

-webkit-transition: opacity 1s;  /* Chrome ve Safari */
-moz-transition: opacity 1s;     /* Mozilla */
-o-transition: opacity 1s;       /* Opera */
transition: opacity 1s;          /* Standart CSS3 Kodu */
opacity:1;                       /* En Son Alacağı Opacity Değeri*/

Bu kodumuz da color yerine opacity kodu bulunmakta.

Kodlarımız arasında bulunan:

"aerakman-yazi a{opacity:0.4;}" kodu yazının ilk halindeki opaklık derecesini belirliyor.
"opacity:1" kodu ise son halindeki opaklık derecesini belirliyor.Yani fare imleci ile üzerine geldiğimiz de opaklığın 0.4'den 1 olacağını belirtiyor.



Bir sonraki yazımda yine Transition özelliğini kullanarak Genişlik ve Gölgelendirme uygulamasını anlatacağım.Bir sonraki yararlı CSS dersimiz de görüşmek üzere, esen kalın...