Sitemizdeki linklerin bir anda bir renkten diğer bir renge geçmesi yerine yavaş bir şekilde, güzel bir animasyon halinde geçmesi, ziyaretçilere daha hoş bir görüntü sunar. Bu özelliği CSS ile yapmamız mümkün! CSS3 Transition özelliği ile linklerimizi daha hoş bir şekilde ayarlayabiliriz.
Renk (Color) Değiştirme Özelliği
CSS Kodlarımız:
-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;
Kodlarımız arasındaki transition kodundan sonra gelen color kodu renk olduğunu belirtiyor. Diğer örneklerde color kodunun değiştiğini görebilirsiniz.
1s kodu ise değişme süresini belirtiyor.
ease-in-out kodu değişimin içeriden (in) dışarı (out) doğru olacağını belirtiyor. Bu kısım ease-in yani sadece içeri doğru olarak ayarlandığı gibi daha farklı şekillerde de kullanılabilir.
ÖRNEK : BURAYA TIKLA!
Opaklık (Opacity) Değiştirme Özelliği
CSS Kodlarımız:
-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 sefer sadece color kodunu opacity olarak değiştirdim.
ÖRNEK : BURAYA TIKLA!
.yazi a{opacity:0.4;} kodu yazının ilk opacity değerinin 1 üzerinden 0.4 olduğunu belirtiyor. CSS3 Transition özelliğininin sonunda verilen opacity:1; değeri ise yazının üzerine gelince opacity değerinin 0.4′den 1 olacağını belirtiyor.
Genişlik (Width) Değiştirme Özelliği
CSS Kodlarımız:
.kutu{
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
background-color:#000;
width:50px;
height:50px;
position:absolute;
top:50px;
left:200px;
}
.kutu:hover{
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
width:200px;
}
Genişlik (width) değiştirme özelliğini anlatırken hover kodundan sonra olmasını istediğim bir özellik daha var! (: Genişlik arttıktan sonra fare imlecimi üzerinden çektiğim zaman, eski haline bir anda geçmesi yerine, yine hover özelliğinde olduğu gibi yavaş bir şekilde geçmesi…
Bunun için .kutu sınıfına da aynı işlemi tekrarlatıyorum.
ÖRNEK : BURAYA TIKLA!
Gölgelendirme (Shadow) Özelliği
CSS Kodlarımız:
.kutu:hover{
/*Transition*/
-webkit-transition: box-shadow 1s;
-moz-transition: box-shadow 1s;
-o-transition: box-shadow 1s;
transition: box-shadow 1s;
/*Gölge*/
-moz-box-shadow: 0px 0px 15px #333399;
-webkit-box-shadow: 0px 0px 15px #333399;
box-shadow: 0px 0px 15px #333399;
}
Bu kısımda da diğer örneklerde olduğu gibi sadece box-shadow kısmını değiştiriyorum.
ÖRNEK : BURAYA TIKLA!
Örnekleri daha da çoğaltmamız mümkün! (: Fakat bu kadarının yeteceğini düşünüyorum. Bir sonraki yazımda görüşmek üzere, hoşçakalın… (;
Kaynak: http://ugurdalkiran.com/ - CSS Dersleri
