skip main navigation skip all navigation top
 

blurred - Latest posts

 

Blurred text in CSS

It's possible to make text looked blurred using just CSS3. See the examples below, just hover over the first bit of text to see the possibility of using blurred text as a hover state.

Some blurred text

Some blurred text



Above, you can see some examples of blurred text in browsers that support CSS3

The trick is to change the colour of the element and either apply the text-shadow or box-shadow properties through CSS. Using the :hover pseudo-class you can create a blurred/unblurred effect

Example:


HTML:

<h1 class="blurred">Blurred text</h1>



CSS:

h1.blurred {
	color: #FFF;
}
h1.blurred:hover {
	cursor: pointer;
	color: #666!important;
	text-shadow: 0 0 5px #444;
}



The colours need to be selected carefully, as the shadows are often a bit lighter than the foreground text colour. Shadow size also plays a role. 5px seems to be effective, but 10px can wash the colour out.

To apply the effect to a block element, you'll need to use the box-shadow property instead of the text-shadow property, but otherwise it's the the same.

For more effects, you could apply opacity to make the text a little see through and see how that works out!

If you find this useful, please check out my portfolio site.

Posted Posted by Chaz 22nd December 2009 @ 15:41pm - comments 0 comments - permalink permalink

Charanjit Chana BSc

My very own blog that covers a wide range of topics. I'm a web developer by day, and by night, behind the projects Nike+PHP and receeve.it

Search

Categories

Tags

See all tags

Social networks

Nike+

Links

Advertisements