CSS3 Text Blur Effect
3 posts
Page 1 of 1
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
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.
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.
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: Select all
Now we're going to add our text into a div, but before we do that we need to position, and div.
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;}Code: Select all
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.div#loc {
position:absolute;
top:50%;
left:50%;
width:700px;
height:100px;
margin-top:-100px;
margin-left:-350px;}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: Select all
Now all we have left is finishing everything up in out index.html file.
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;}Code: Select all
We're now done. cooll;<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>You do not have the required permissions to view the files attached to this post.
Quick Profile
Information
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am View Full Profile
That looks really cool hurts your eyes if you look heaps though good work Mike
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
Thanks!
3 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023