CSS3 ile birlikte artık geçiş efektleri yavaş yavaş veya uzun uzadıya yapılır hale gelmiştir. Başka bir deyimle, mausumuzu bağlantı üzerine getirdiğimizde renk değişimi belirli zaman aralığında oluşmaktadır. Renk değişimi oluşurken aynı zamanda bu geşişlere bazı estetik efektlerde uygulayarak göze hitap eden özellikler ekleyebiliyoruz.
Sitenizde yapacağınız birkaç basit geçiş değişikliği fark yaratabilir.
Örneğimizde; buton olarak Anasayfa örnek butonu üzerinde uygulamalar yapıldı. Zaten buton stil kodlarımızı incelediğinizde bu ortak ayarları görebilirsiniz.
Dikey ve yatay kaydırma efektlerinde hover stil kodlarımız incelendiğinde tek farkın yatayda efektin genişliğe verildiğini dikeyde ise yüksekliğe verildiğini görebilirsiniz.
İkon animasyonu ile ilgili şurada bulunan adreste ki bilgiler kullanılmıştır. Ziyaretçi mausla buton üzerine geldiğinde metnin sol tarafına slaytla ikon gelmektedir. Burada yapılan şey; kodlara baktığımızda taşmayı hidden yaparken, padding vererek de metni sol tarafa kaydırmak olmuştur.
Sıçrama efekti de her zaman ziyaretçilerin dikkatini çeken bir animasyondur.
Bu yazımızda hepsi bir arada Css3 ün hover geçiş efektlerinden örnekler sunulmaktadır.
Önizleme yaparak kaynak kodları indirebilirsiniz.
0 Comments
Yorum Gönder