Realistic 3D horizontal

1
1177
views

3d tasarım
Herhangi bir  resim yada javascript dosyası  kullanmadan hazırladığım bir Css3  üst menü örneği. Aslında yamayı düşündüğüm örnek Css3 perspctive ile  butonların görünüm açısını değiştirmekti. Bu şekilde  3D görünümlü bir Css3 üst menü örneği ortaya çıkacaktı. ama nedenini tam olarak bilmiyorum ama perspective  ile  butonların görünüm açısını değiştirdikten sonra butonlarda  tıklanma özelliği ortadan kalkıyordu. Sanırım  butonun açısı  değiştiği için mouseyi de aynı açıdan butonların üzerinden gezdirmek gerekiyor bu da imkansız birşey 🙂 Bilgisayarın içine  girip  eğik görünen butona  düz tarafından bakıp tıklatmak gibi birşey işte.

Bu tip  bir menüyü  düşündükten sonra yapmamak ta kötü olurdu. Perspective yerine margin-top kullanarak yukarı çıkmasını sağladık ayrıca buton yukarı çıkarken de alttan biraz  uzuyor ve butonun alt kısmında da gölg efekti görünüyor. Bu gölgenin görünmemesi için de  ufak bi hile kattık Css3 üst menü örneğimize. Css3 üst menü örneğindekii butonların hemen altında bulunan  siyah bölüm sayesindesorunsuz gibi görünüyor. Bu sefer hazırladığım örnekte Css3 geçişleri biraz fazla abarttım gibi  görünüyor. Alt kategorilere  sahip butonların üzerine geldiğinizde alt linklerin olduğu bir pencere  çıkıyor. Linklerin arkaplanı siyah ve mouse ile linklerin üzerine geldiğinizde açık gri rengine dönüşüyor. Bu bölümde de çok yavaş çalışan Css3 geçişler eklediğim için Bir diğer linke  geçtiğinizde  bile bir önceki linkin arkaplanı hala  açık gri gibi görünüyor. Renklerin geçişi  biraz yavaş ama menüye farklı bir güzellik katmış bence. Css3 geçişleri desteklemeyen tarayıcılarda ise  bu geçişler bir anda olup bitiyor.

 

Kullanım

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

Css :

 

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

Html :

 

Aranan kelimeler:

  • mintik 3d
1 oy (2 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikscale ile hazırlanmış hover-efekt
Sonraki İçerikMesoColumn

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?

Paylaş

1 Yorum

CEVAP VER

Please enter your comment!
Please enter your name here