3D görünümlü gerçekçi hover-efekti

3
471
views

effect

Css3  dönüşümler ve  geçişler  kullanarak hazırladığım biraz gerçekçi görünümdeki  hover efektini yapmamdaki asıl amacım aslında küp  şeklinde  dönen yan menüydü. Nedense  bu tarz  bi örnek ile daha önce hiç karşılaşmadığım için bu seferlik böyle bir çalışma ortaya çıktı.  Asıl yapmak istediğim görünümü elde  etmiş olmasam bile hoş bir çalışma olarak görünüyor. Ayrıca alt kısım için uygun bi renk seçeneği bir türlü tutturamadım. Yazı karakterleri  ve  arka planını  kendi zevkinize  göre ayarlarsanız  sanırım daha iyi olur.

3D görünümlü gerçekçi Css3 hover  efekti örneğinde  mouse ile resmin olduğu çerçeveye geldiğinizde resim 70px  yukarı çıkarken Css3 perspective  sayesinde resmin üst kısmı  yan yatıyor ve 3 boyutluymuş gibi  görünüyor. Bu işlem sırasında üstten ışık  vuruyormuş  gibi  bir  efekteklemek istedim örneğe. Saydamlık ayarı verdiğimde beyaz arkaplanla  gayet güzel görünüyordu ama arkaplan renkli olunca resmin arkasında arkaplanın rengi çıkmaya başladı  bu yüzden resmi ayrı bir çerçeveye  alıp arkaplan renginide  beyaz yaptım. Mouse ile resmin üzerine geldiğinizde sanki üstten ışık vuruyormuş gibi  bir  görünüm ortaya çıkıyor.

Asında  asıl  elde etmek istediğim görüntü mouse resmin üzerinde  geldiğinde yukarı çıkan resmin tavanda yer kalmadığı için eğilmesiydi. Az çok  aklımdan tasarladığım görüntüyü elde ettiğimi sanıyorum. Tabi işin en önemli  tarafı  örneği sizin beğenmeniz. Bu konuda  yorumlarınızı eksik etmeyin. Alt kısım yani resim açıklamalarının olduğu bölüm gayet kötü onu kabul ediyorum. bunun dışında kullanılmaya değer  bir örnek diye düşünüyorum.

Son olarak söylemem gereken diğer önemli bir konu 3D  görünümlü animasyonlu  şekilde  görünen Css3 hover örneğinde  herhangi  bir  JavaScript  yada jQuery kullanmadım. Tamamiyle Css kodlarda oluşuyor. Yanlız eklediğim bir tane ikon var. Onu da WeLoveIconFonts  sitesinden ekledim. Dilerseniz daha farklı ikon seçeneklerini  bulabilirsiniz. Yada Css3 gerçekçi hover örneğinden silebilirsiniz.

 

Kullanım

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

Css :

Font awesome ikon kodu : 

 Demo css kodu : 

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

Html :

 

 

3 YORUMLAR

  1. Hocam elinize sağlık fakat fare ile üzerlerine gelince aşırı bir şekilde titreme efekti var. Bunu nasıl kaldırabilirim ? Bütün olayı bozmuş bu titreme.

    • Aslında olaın farkındayım. Aynı anda hem geriye doğru yatıp hem de yukarı doğru çıktığından dolayı bu pürüz çıkıyor ortaya. Sırf bu hata yüzünden paylaşmaktan vazgeçecektim neredeyse. Belki birilerinin işine yarar diye yine de yayınladım. Eğer resim çerçevesi yukarı doğru kaymadan sadece geriye doğru yatarsa herhangi bir titreme oluşmaz. jQuery kullanarak ta denedim ama sonuç aynı, mouse üzerine geldiğinde yukarı çıkan çerçevelerde titreme oluyor. Bu titreme olayı yüzünden sadece geriye yaslanmasını sağlayıp açıklamaların üstten düşmesini ayarlayacaktım ama yapmak istediğim buydu. Bu yüzden olduğu gibi yayınlamak zorunda kaldım. Asıl amacım hover efekti hazırlayıp yayınlamak değildi aslında. Css konular paylaşan Türkçe sitelerde bu tarz örnekler çok az var. Amacım sadece Css perspective ve rotatenin nasıl kullanıldığını göstermekti.

    • Bu gün tekrar bu titreme olayı için bir çözüm bulmak için Css kodları inceledim, ne yaptıysam boş. Meğerse en başından beri eklemiş olduğum body arka plan deseninden kaynaklanıyordu. Daha önceden hazırlamış olduğum bazı örneklerde bu arka plan desenleri tasarımda sorun yapmasına rağmen neden aklıma gelmedi anlayamadım. Body arka plan desenini silerseniz sorun kalmayacaktır.

CEVAP VER

Please enter your comment!
Please enter your name here