Bluraity

The HTML blur!

Can't Read? Try hovering cursor over contents!

Gives you ability to emulate blur effect using HTML. It uses one of the classic techniques that I used for Flash 5 to create blur effect. By replicating the element around the target element and applying opacity on each. So lets fill a paragraph with random text and texturea at background:

Sodales dignissim, est bibendum cum etiam sapien non arcu. Ut vitae, eros suspendisse donec cubilia interdum vestibulum, quis mauris viverra, taciti lobortis sit. Eget ut urna est nibh lacus, nunc est cras. Pulvinar sapien, sem pulvinar sed, elit cras. Et aperiam, sed magna amet nunc enim turpis, cras nec, velit elit, rhoncus iure platea congue ut magna. Nec rutrum pede quis donec wisi amet, nam dictum culpa vel lectus ac. Erat amet erat sit pellentesque ante ea, quam donec nunc quia, nec lectus vitae magna vestibulum condimentum, quam donec. Erat penatibus velit nunc sit nullam adipiscing, laoreet ut laoreet posuere. Arcu pellentesque id ligula, varius justo eget semper, morbi porta turpis, ultrices suscipit felis praesent lectus fringilla ultricies, amet nulla non rutrum erat.

Librairies Supported

Currently the plugin supports jQuery(Demo), Mootools(Demo)

Download

Get the source from github Download

Manually blurred area

Blur
Unblur
Click Blur to blur out!
The desired area can contain almost every html element. Have a look at some examples:

Links


My homepage link

Images


Tables


row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Freaking inputs!


First name:
Last name:
Male Female

Known Issues

- Immature
- Margin and padding issues!
- Flash not tested!
- HTML 5 video and canvas not tested!
The MIT License Copyright (c) 2010 Zohaib Sibt-e-Hassan(MaXPert)