BREAKING NEWS :
Loading...

Cara Membuat CSS3 Text Hover Effects (3D)

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


Cara Membuat CSS3 Text Hover Effects (3D)


color:#fff;
background-color:#ffffff;
text-shadow:#969696 1px 3px 0, #aba8a8 1px 13px 5px;
}

REALISTIC 3D


Cara Membuat CSS3 Text Hover Effects (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


Cara Membuat CSS3 Text Hover Effects (3D)


color:#000000;
background-color:#ffffff;
text-shadow:2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;
}

SIMPLE SHADOW


Cara Membuat CSS3 Text Hover Effects (3D)


color:#fff;
background-color:#ece9e9;
text-shadow:#474747 3px 5px 2px;
}


NEON


Cara Membuat CSS3 Text Hover Effects (3D)



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


Cara Membuat CSS3 Text Hover Effects (3D)



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.

Subscribe to receive free email updates: