Css – Hover.css Kullanımı

Arkadaşlarım merhaba. Bugün yine bir kütüphanenin kullanımı hakkında bilgi edineceğiz. Front-endci arkadaşların çok seveceklerini düşündüğüm bir kütüphane. Hover.css kütüphanesi adından da anlaşılacağı üzere html nesnelerine çeşitli hover efektleri veren açık kaynak kodlu bir css kütüphanesidir. Githup reposuna şuradan  kendi sayfasınada buradan ulaşabilirsiniz. Kütüphane içerisinde 2D ve 3D olmak üzere bir çok hover efekti mevcut. Tabiyki biz bunları oturup uğraşırsak kendimizde yazabilir ancak oturup gereksiz yere okadar css kodu yazmak ve her proje için ayrı ayrı yazmaktansa yapılmışını kullanmak daha mantıklı değil mi? Lafı çok fazla gevelemeden nasıl kullanılacağı ve son olarak benim yaptığım bir örneğe bakalım.

Öncelikli olarak githup reposundan kütüphane dosyalarını indirelim. İndirdiğimiz dosyanın içindeki css klasörünün içine girip hover.css dosyasını kendi oluşturacağımız html sayfasına dahil edelim.

<link rel="stylesheet" type="text/css" href="css/hover.css">

Bundan sonra artık kendi oluşturduğumuz html etiketlerine kütüphanenin içindeki sınıfları atayarak efektler verelim. Hangi efekti kullanmak istiyorsanız ona ait olan sınıfı atayın. Efekt üzerinde değişiklik yapmak için (Örn; renk değiştirmek) hover.css içinden düzenleme yapabilirsiniz.

Örnek

<a href="#" class="hvr-skew">Bana tıkla</a>>

Not: Benim hazırladığım bir örneği sayfanın en altında bulabilirsiniz. Ayrıca bu tarz kütüphaneler ilk çıktıklarında ücretsiz olurken sonradan ücretli olabiliyor. İlerleyen günlerde kütüphane ücretli olursa o zaman sayfanın en altındaki yandex bağlantısından indirebilirsiniz.

KULLANILABİLECEK EFEKTLER

  • 2D EFEKTLER
    • Grow
    • Shrink
    • Pulse
    • Pulse Grow
    • Pulse Shrink
    • Push
    • Pop
    • Bounce In
    • Bounce Out
    • Rotate
    • Grow Rotate
    • Float
    • Sink
    • Bob
    • Hang
    • Skew
    • Skew Forward
    • Skew Backward
    • Wobble Horizontal
    • Wobble Vertical
    • Wobble To Bottom Right
    • Wobble To Top Right
    • Wobble Top
    • Wobble Bottom
    • Wobble Skew
    • Buzz
    • Buzz Out
    • Forward
    • Backward
  • ARKAPLAN EFEKLERİ
    • Fade
    • Back Pulse
    • Sweep To Right
    • Sweep To Left
    • Sweep To Bottom
    • Sweep To Top
    • Bounce To Right
    • Bounce To Left
    • Bounce To Bottom
    • Bounce To Top
    • Radial Out
    • Radial In
    • Rectangle In
    • Rectangle Out
    • Shutter In Horizontal
    • Shutter Out Horizontal
    • Shutter In Vertical
    • Shutter Out Vertical
  • KENARLIK EFEKTLERİ
    • Border Fade
    • Hollow
    • Trim
    • Ripple Out
    • Ripple In
    • Outline Out
    • Outline In
    • Round Corners
    • Underline From Left
    • Underline From Center
    • Underline From Right
    • Reveal
    • Underline Reveal
    • Overline Reveal
    • Overline From Left
    • Overline From Center
    • Overline From Right
  • GÖLGE EFEKTLERİ
    • Shadow
    • Grow Shadow
    • Float Shadow
    • Glow
    • Shadow Radial
    • Box Shadow Outset
    • Box Shadow Inset

Şunlarda Hoşunuza Gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: