Friday, September 5, 2014

CSS3 Text Effects

CSS3 Text Effects




Shadow

<style>#txt{text-shadow: 0 6px 4px #85c226,-3px -5px 4px #fe2192, 3px -5px 4px #f7c200; }</style>

Double

<style>#txt{text-shadow:0px -10px 0 #fe2192;font-size:30px;}</style>

Blur

<style>#txt{color: transparent;text-shadow: 0 0 5px rgba(0,0,0,0.5);}</style>

Cloudy Text Effect

<style>#txt{text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);color: rgba(255,255,255,0);font-size: 30px;background:#000;}</style>

Embossed Text Effect

<style>#txt{text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;color: #9c8468;opacity: 0.3;}</style>

City Lights Text Effect

<style>
        #txt{color: #fff;text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;letter-spacing: 5px;}</style>


Please share your comments and feedback.Thanks.Please subscribe my updates via email.

1 comment:

  1. you would have explained with images related to the code. It will be the esay to understand by seeing the code. Anyhow very interesting...

    ReplyDelete