BouncingBorder- Çerçevelere border efekti ekleme

0
143
views

border efekti

Başlık eklemek için en çok zorlandığım örneklerden bir tanesi. Böyle bir örneğe nasıl bir başlık gider diye az  düşünmedim. Mouse ile resimlerin üzerine geldiğinizde resimlerin border kısmı  için hazırlanmış hover animasyonu devreye giriyor ve resimlerin etrafındaki border (çizgi)  bir anlık incelip  kalınlaşıyor. Sanki zıplıyormuş gibi bir görüntü çıkıyor ortaya.

Zıplama kelimesini daha önceden blog içindeki yazılarda kullandığımı hatırlamıyorum. Css3 hover efekti  için düzgün bir başlık bulamama nedenim bu olsa gerek.  İsmini hiç sevmesemde gerçekten çok güzel bir hover efekti gibi görünüyor. Border rengi  resimde gördüğünüz  gibi  gri renkli değil. Orjinali kırmızı renkli ve demoda da kırmızı renkli görünüyor. Resmi optimize edince kırmızı renk çok kötü bir hal  aldığı için renk kodlarından demoyu gri ve beyaz rengine çevirmiştim.

Css3  animasyon  300milisaniye içinde resmin olduğu çerçevede border  için 5 farklı gölge efektini çalışyırıyor. Bu gölge efekterinin ehr birine  ayrı ayrı renk verme imkanı da var. Bu sayede gök kuşağı gibi rengarenk hover efektleri oluşturabilirsiniz. Yada kendi sitenizin temasına  uygun renkler belirleyebilirsiniz.  Ayrıca  border  kalınlıklarınıda  animasyon kısmında kolaylıkla değiştirebilirsiniz.

 

 
Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

 

CEVAP VER

Please enter your comment!
Please enter your name here