Cara Membuat CSS3 Text Hover Effects (3D)
Cara Membuat CSS3 Text Hover Effects (3D)
CSS3 Text Effects akan memberi kita lebih banyak transformasi teks. Kita bisa menghasilkan beberapa efek teks termasuk efek 3d, efek bercahaya, dll.
Ada beberapa efek teks yang akan aku berikan disini, walau sebenarnya masih banyak efek lain yang belum aku cantumkan.
Terus codenya diletakkan dimana? Tentu saja di bawah content dalam template pada efek link yang ada di blog kita, atau Anda bisa meletakkan di judul posting, sidebar.
Beberapa contoh dan code CSS3 Text Effects:
SIMPLE 3D
color:#fff;
background-color:#ffffff;
text-shadow:#969696 1px 3px 0, #aba8a8 1px 13px 5px;
}
REALISTIC 3D
color:#fff;
background-color:#696969;
text-shadow:#ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px;
}
CLASIC MOVIE
color:#000000;
background-color:#ffffff;
text-shadow:2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;
}
SIMPLE SHADOW
color:#fff;
background-color:#ece9e9;
text-shadow:#474747 3px 5px 2px;
}
NEON
color:#fff;
background-color:#232323;
text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
}
FIRE
color:#fff;
background-color:#333;
text-shadow:#fff 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
}
Itulah beberapa contoh CSS3 Text Hover Effects, kode warna dan ukuran px bisa diubah sesuai keinginan.