◄ Min  Size Fonts: + | - | ± Color: Max ►

2 Hover Trick Image and iFrame Generator

Dua efek image berikut datang dari web dynamic drive Walau sebenarnya jika ditelaah pernah memosting juga mengenai tutorial efek gambar CSS 3D Flip dan Before and After Image (transition trick) Efek akan terlihat jika cursor didekatkan pada objek tujuan (hover)
CSS 3D Flip
Salah satu fitur terobosan di CSS3 adalah kemampuan untuk memutar elemen HTML dalam ruang 3D. Di bawah kode CSS menunjukkan bagaimana untuk memutar "2 sisi" elemen baik pada X atau sumbu Y untuk mengungkapkan isi di sisi belakang. Hanya memindahkan mouse anda ke atas elemen untuk melihat flip. Kode bekerja di FF10 +, IE10 +, Chrome, dan Safari, dengan browser yang mendukung bukan sekedar menampilkan konten sisi belakang itu dari awal.
DEMO
Wanita cantik kalau rame-rame gitu malah pusing milihnya,jadi kepengen cemuanyah gitooh!!!


You can get code and read tutorial here CSS 3D Flip
Before and After Image (Peel Back)
"Before and After" gambar selalu menyenangkan untuk dilihat, terutama jika transisi yang tepat digunakan secara efektif swap antara keduanya. Contoh CSS menunjukkan menggunakan CSS3 animasi untuk menghidupkan "clip" property of "before" untuk mengupas dan mengungkapkan "after" onmouseover gambar. Hasilnya adalah sederhana namun ramping "Before and After" efek gambar!
DEMO

You can read full documentation here Before and After (Peel Back) Image
Untuk bonusnya Koben kasih tools untuk membuat markup HTML buat iframe karya master @nitinmaheta iFrame Generator. Master satu itu rajin bener bikin tools buat kita ;)) :x :P
Happy coding \m/
Loading...
X2 Hover Trick Image and iFrame Generator

Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE