CSS

CSS3 ile Transform


CSS 3 web geliştiriciler için beraberinde bir sürü yeni özelliği getirdi. background-clip özelliklerinden, transform, border-radius ve text-shadow gibi birçok görsel yeniliği kolaylıkla uygulama fırsatı bulduk. Artık tarayıcıların neredeyse tamamı da bu özellikleri desteklediğinden bu özellklerden kısaca bahsedebilirim.

 

CSS3 Transitions

Bu özellikle örneğin bir öğenin üzerine geldiğimizde kenarlıklarını arkaplanını veya text ise font rengini değiştirebiliriz.

a { color: #e83119; }
a:hover { color:#0a99ae; }

Şimdi, CSS3 ile, yapacağımız geçişin süresi ve bu geçişin zaman içinde nasıl ilerleyeceğini belirleyelim. Örneğin linkin renk özelliğini,yavaşça geçen bir zamanlama efekti ile 0,5 saniyeyle solacak şekilde ayarlayalım.  ease-out  daha akışkan ve hızlı bir geçiş sağladığı için onu kullanalım.

a {
-webkit-transition-property: color;
-webkit-transition-duration:.5s;
-webkit-transition-timing:ease-out;
}


Bunu tek satırda yapmak istersek;

a { -webkit-transition: color .4s ease-out; }

Örneği JSFiddle da incele

 

Devam edecek...

 

Bu kategoride Son Yazılar