Text-Shadow "Light" Effect
/*light*/ #light {font: 3.1em/1.3em dicotmedium; font-weight: bold; display: inline-block;color:#111; text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px; transition: all linear 400ms; -o-transition: all linear 400ms; -moz-transition: all linear 400ms; -webkit-transition: all linear 400ms; } #light:hover{color:#fff; text-shadow: #fcffbb 0 3px 10px, #fcffbb 0 3px 10px, #fcffbb 0 -3px 15px, #fcffbb 0 8px 10px; } #light:focus { outline: none; }
KODE HTML :
- <div id="light">TEKS HERE</div>
Text-Shadow Effect
/*blur*/ #blur {font: 3.1em/1.3em dicotmedium; font-weight: bold; display: inline-block;;color:#111; text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px; transition: all linear 400ms; -o-transition: all linear 400ms; -moz-transition: all linear 400ms; -webkit-transition: all linear 400ms; } #blur:hover{ text-shadow: hsla(0,0%,0%,0) 0 0 10px, #fff 0 4px 3px, #ddd 0 9px 3px, #ccc 0 12px 1px, rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,rgba(0,0,100,0.2) 0 15px 80px; } #blur:focus { outline: none; }
KODE HTML :
- <div id="blur">TEKS HERE</div>
Text-Shadow 3D Glasses
/*glasses*/ #glasses {font: 3.1em/1.3em dicotmedium; font-weight: bold; display: inline-block;;color:#111; text-shadow: -0.06em 0 white, 0.06em 0 blue; letter-spacing: 0.08em; transition: all linear 400ms; -o-transition: all linear 400ms; -moz-transition: all linear 400ms; -webkit-transition: all linear 400ms; } #glasses:focus { outline: none; }
KODE HTML :
- <div id="glasses">TEKS HERE</div>
Text-Shadow CarveMe
/*CarveMe*/ #CarveMe { font: 3.1em/1.3em dicotmedium; font-weight: bold; display: inline-block; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.2); } #CarveMe:hover { -webkit-text-stroke: 0; color: transparent; background-color: rgba(82,96,117,0.5); -webkit-background-clip: text; text-shadow: rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px; -webkit-transition: text-shadow .1s ease-out, background-color .2s ease-out; } #CarveMe:focus { outline: none; }
KODE HTML :
- <div id="CarveMe">TEKS HERE</div>
Cool Teks Shadow
/*cooltext*/ #cooltext {font: 3.1em/1.3em dicotmedium; font-weight: bold; color:#111; text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px; -webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out; } #cooltext:hover{color:#fff; text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00FCDA,0 0 70px #00FCDA,0 0 80px #00FCDA,0 0 100px #00FCDA,0 0 150px #00FCDA; }
KODE HTML :
- <div id="cooltext">TEKS HERE</div>
Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!
nyari efek box shadow neh sob biar bisa buat efek 3d kayak form komentar neh, he,,he,,,
BalasHapus@Ady Blink: OK Sob, gw cb share dulu yach.hehee
BalasHapusGan cara nambahin style keren kyk gini di judul postingan gmana gan?
BalasHapus@Muhammad Nur: jika sobat ingin psang pd bgian judul posting, silahkan cari kode .post h3 { (setiap template kodenya berbeda-beda). jika sdh ketmu tggl msukkan slah satu kode diats diantranya.
BalasHapuscontoh :
.post h3 {
--
font: 3.1em/1.3em dicotmedium;
font-weight: bold;
color:#111;
text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
---
}
Aku coba tapi kok ga bisa keluar yaa efeknya??
BalasHapus@De'Sevia: yang bner>>> , cb disimak baeg2 nenk tutorialnya, lalu cb lg. pst bs deh.hehee
BalasHapus