Tuesday, March 19, 2013

Create Simple Text Blur With CSS3


Hover on the text below - works on latest Chrome, Safari, Firefox, IE 10, etc, but not on IE 9 and below.

TESTING BLUR
CSS
Put the CSS codes below inside <style> ... </style> tag. It can be placed inside the head or the body of the HTML.
#blur
{
/*text properties*/
text-align:center;
font-size:60px;
font-family:Impact;

/*color of the text*/
color:transparent;

/*text-shadow*/
text-shadow:0px 2px 15px #ababab;

/*hover transition timing*/
-moz-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}

#blur:hover
{
/*text color on hover*/
color:#000;

/*text shadow on hover*/
text-shadow:0px 0px 30px #ababab;

/*mouse cursor shape on hover state*/
cursor:pointer;
}

HTML (updated)
Put this anywhere you want the text to appear on your webpage.
<center>
<table><tr><td>
<div id="blur">TESTING BLUR</div>
</td></tr></table>
</center>

I put table wrapping the div tag to limit the area of hovering.

Text shadow CSS property
General syntax :
text-shadow : (x-position) (y-position) (blur-amount) (hex-color);

Example :
text-shadow : 20px 30px 5px #0F0AFE;
To put multiple shadows with different positions, just use comma(s) to separate the shadows. For example, putting 3 different shadows for a single text.
text-shadow :
(x1-position) (y1-position) (blur-amount1) (shadow-color1),
(x2-position) (y2-position) (blur-amount2) 
(shadow-color2)
(x3-position) (y3-position) (blur-amount3) (shadow-color3);

Further reading, blur with complex animation, using jQuery and JavaScript, on CSS tricks

For fun

FOR FUN

No comments:

Post a Comment

Tell me what you think...