3B katlanan çerçeve hazırlama

3B

Ryan McLaughlin tarafından Css3 geçişler ve dönüşümler  kullanılarak  hazırlanmış bir hover  efekti. Sadece Webkit  tarayıcılarında çalışabilen bu örnek resimde  de gördüğünüz  gibi mousenin üstüne gelmesi ile  açılan bir  çerçeveye  sahip.  Bu  örneği kendiniz  için birçok alanda kullanabilirsiniz. Örneğin foto galeri, download  bölümler, site tanıtım kartları  gibi  bölümler  olarak kullanabilirsiniz. Hatta  gizlenmiş bir ikon bölümü  olarak bile kullanabilirsiniz.

Aklınıza  gelebilecek her yerde  kullanabileceğiniz gibi  site  tasarımınıda  bir o kadar çekici  hale  getirmeyi başarabilen bir örnek. Sitenizin her tarafında mouse üzerine geldiğinde  açılan bölümler  eklemek  abartılı olur  sanırım.  Ama kullanma konusuna gelince  her yere  uygun görüyorum.

Kullanım

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

Css dosya adresi : 

<link rel="stylesheet" href="stil.css" />
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="container">
<h3>Css3 Hover 3D Effect</h3>
  <div id="hover-flip">
        Peek-a-boo!
        <p>Hover meh</p>
    </div>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-13 tarihinde yayınlandı,Toplam 947 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...