Charanjit Chana's Blog http://blog.charanj.it The personal blog of Charanjit Chana en-uk Technology, design, programming, sport, entertainment Tue, 07 Sep 2010 06:10:29 -0700 Fri, 27 Aug 2010 16:47:38 -0700 http://www.rssboard.org/rss-specification hello@charanj.it hello@charanj.it Blurred text in CSS http://blog.charanj.it/post/164/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.

]]> Tue, 22 Dec 2009 15:41:45 New portfolio is live! http://blog.charanj.it/post/161/new-portfolio-is-live- I tweeted a few things about my new portfolio and I finally got it up yesterday evening!

I feel that it showcases my talents a lot better than the last version and has a lot more personality! The site is built in HTML5 and uses CSS3, it should degrade nicely down to XHTML and CSS2.

Quite a bit of jQuery, but all unobtrusive. As has become my signature, the site doesn't work in IE6, but I really couldn't care!

Check out charanj.it!

]]> Wed, 4 Nov 2009 17:29:51