1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS3 Text Blur Effect

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, Jul 17, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Click Here: To view the demo.

    Well first off lets give our body a background.

    We'll be giving it a radial gradient. You can always use an image, or whatever you want, but I like this effect, and I think it'll work well for this simple effect.

    Note: Radial gradients aren't supported for Internet Explorer, or Opera yet.
    Code:
    body {
    	background:-moz-radial-gradient(circle, #FFF, #727272);
    	background:-webkit-gradient(radial, center center, 0, center center, 460, from(#FFF), to(#727272));
    	background:-webkit-radial-gradient(circle, #FFF, #727272);
    	border:0px;
    	background-color:#727272;}
    Now we're going to add our text into a div, but before we do that we need to position, and div.
    Code:
    div#loc {
    	position:absolute;
    	top:50%;
    	left:50%;
    	width:700px;
    	height:100px;
    	margin-top:-100px;
    	margin-left:-350px;}
    Now it's time to create the text blur effect. The key with this is using the text-shadow attribute in CSS3 for the blur, and making sure the color of the text is fully transparent. Also I decided to change the cursor to default when hovered on, cause it's a bit of an annoyance seeing that text cursor.

    So the main text is blurred, and when hovered over we're going to use CSS3 transitions to make a nice smooth animation to reveal the blurred text.
    Code:
    h1#txtblur {
    	cursor:default;
    	font-size:75px;
    	font-family:Arial;
    	color:rgba(0,0,0,0);
    	text-shadow:0px 0px 32px #000;
    	transition:all 600ms ease-in-out;
    	-webkit-transition:all 600ms ease-in-out;
    	-moz-transition:all 600ms ease-in-out;
    	-o-transition:all 600ms ease-in-out;}
    	
    h1#txtblur:hover {
    	text-shadow:0px 0px 0px #000;}
    Now all we have left is finishing everything up in out index.html file.
    Code:
    <html>
    <head>
    <title>CSS3 Text Blur Effect</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    	<div id="loc" align="center">
    		<h1 id="txtblur">I'm Now Revealed!</h1>
    	</div>
    </body>
    </html>
    We're now done. cooll;
     

    Attached Files:

Share This Page