<< Previous BlogNext Blog >>

Blurry Text & Simple Snapshots With HTML & CSS3

I was reading the latest post on Ajaxian and found Marcin Wichary (the creator of the Google Pacman Logo) to be an absolute genius with some very interesting ideas. Thought I'd try out a couple of them here, so to start with here's some blurry text:

Blurry Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus arcu sit amet erat feugiat accumsan. Morbi rutrum dui a lacus sollicitudin in accumsan quam vestibulum. In hac habitasse platea dictumst. Donec sed sapien mi, ut blandit orci. Integer iaculis, massa vitae blandit posuere, sem leo bibendum lacus, vel varius arcu ligula eu eros. Integer gravida scelerisque eros eget auctor. Sed malesuada volutpat vehicula. Vivamus est nunc, adipiscing ut auctor congue, laoreet ac purus. Nunc vel velit sed est sodales molestie. Cras semper pharetra ullamcorper. Nam sollicitudin vulputate gravida. Suspendisse nec odio tellus. In ipsum nibh, scelerisque quis tincidunt eget, tempus vel risus. Mauris viverra convallis ligula at vulputate. Nullam accumsan tristique diam, non mattis justo dapibus et. Donec sodales ligula a nisl tincidunt ut tempor mi adipiscing.

This effect, although being completely pointless and making text almost illegible is a very simple effect to achieve with CSS. All you need to do is add the following rules to your CSS:

.blurry {
	color: transparent;
	text-shadow: 0 0 1px #FFF;
}

That's it. And you can see what it does. The text is hidden, all you see is the text-shadow, which can be as blurry as you want (though 1px is still quite blurry and the higher the pixel value the more blurry it gets!). Here's another example with more blur applied:

Blur Me Up, Baby!

Donec lacinia eleifend cursus. Quisque vel lorem in purus cursus auctor lobortis ut enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras massa massa, tempor at dapibus vestibulum, porttitor in elit. Morbi vehicula facilisis augue vitae consectetur.

Unreadable, but cool!

Simple & Pointless Snapshots!

This effect is a little more difficult to achieve but is based on the small description in the link above. We're going to create an iframe to a page, and then scale it using CSS3. The, so that you can't interact with it we are going to place a div over the top.

For this effect all you need in your CSS is something like:

#outer {
     // Our container
    position: relative;
}
#cover {
     // Our mask
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
iframe {
     // Our iframe
    width: 1024px;
    height: 768px;
    z-index: 0;
    margin: -300px 0 0 -400px;
    
    -moz-transform: scale(0.2);
    -webkit-transform: rotate(0.2);
}
5287tweet
3
Excellent
1
Very Good
0
Average
0
Below Average
0
Poor

Article Info

About the author

Alex is a web developer currently working for Worldview Limited in Morecambe, UK. Alex likes to write code and is proficient in HTML, CSS, PHP, JavaScript, Ajax, XML and XSLT. In his spare time Alex likes to write articles and scripts for various projects.

Share This Article

Who Likes This?