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>