Text-Shadow Effect With CSS3

Text-Shadow "Light" Effect

LIGHT EFFECT

KODE CSS :

/*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

TEKS SHADOW

KODE CSS :

/*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 EFFECT 3D

KODE CSS :

/*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

GLASSES EFFECT 3D

KODE CSS :

/*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

COOL TEXT

KODE CSS :

/*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>

Selamat Mencoba..!!!