CSS 3 Teknikleri 10 -> Hover Stili Verelim

Css 3 ile klasik olarak linkler için kullandığımız hover metodu ile birlikte daha şaşırtıcı ve etkileyici performans sağlayan efektler vereceğiz. Flash ' a benziyor.

Css 3 ile klasik olarak linkler için kullandığımız hover metodu ile birlikte daha şaşırtıcı ve etkileyici performans sağlayan efektler vereceğiz. Flash ' a benziyor.Jquery tadında .

Evet öncelikle destekleyen tarayıcılardan bahsetmek istiyorum ;

[list]
Chrome
Safari
Firefox 3.7+
[/list]

Her zaman ki gibi IE yine problem çıkarıyor , diğer makalemde de belirttiğim gibi geleceğe yatırım yapıyoruz.

Evet kod kullanım örneğine geçiş yapalım . Oluşturduğumuz bir kutu modeline atadığımız id değerini kullanacağız . Kullanışlı ve mantıklı .


#degisim {
    -webkit-transition: -webkit-transform 1s ease-in-out, background-color linear 1s, color linear 1s; /* Linear , dikey tipte bir gradyan oluşturuyoruz , ilk görünüm bu olacak unutmayalım . Kod üzerinde ki tüm parametrelerin ne anlama geldiğini merak ediyorsanız , W3C sitesinde tüm aktif açıklamaları bulunmaktadır. Burada anlatmamın bir anlamı olmayacaktır. */
    -moz-transition: -moz-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
    -o-transition: -o-transform 1s ease-in-out, background-color linear 1s, color linear 1s;

}

#degisim:hover {
    -webkit-transform: rotateZ(-20deg); /* Transform değeriyle -20 deg Z koordinatında  yönlendirme sağlıyoruz  */
    -moz-transform: rotateZ(-20deg);
    -o-transform: rotateZ(-20deg); 
    background-color: #aaa;
    color: #326895; 
    cursor: pointer;
}



Bu konu hakkında ki en geniş bilgileri http://www.w3.org/TR/css3-2d-transforms/
Bu adresten ulaşabilir , bir çok fonksiyon bulabilirsiniz.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git