Menu
Is it possible to apply a blur to an HTML element(div & img)?
I am developing solely for the iPad so cross-browser compatibility is not an issue & I can use HTML5 CSS3 techniques.
I know how to blur text but this CSS doesn't blur the actual HTML element or its border:
text-shadow: 0 0 8px #000; color: transparent; I googled this but it doesn't blur the image in my browsers:
filter: blur(strength=50); 
732
Add a blur effect with a brush. Soften certain areas and draw focus to your subject by applying blur with your favorite brush. Select the Blur tool in Photoshop, choose a brush tip and strength, and drag it over the spots you want to blur.
Blurring is to make something less clear or distinct. This could be interpreted quite broadly in the context of image analysis - anything that reduces or distorts the detail of an image might apply.
Gaussian blurring is commonly used when reducing the size of an image. When downsampling an image, it is common to apply a low-pass filter to the image prior to resampling. This is to ensure that spurious high-frequency information does not appear in the downsampled image (aliasing).
The trick is to use background-position:fixed; on html / body and the element to blur on top of it, so , both background-image lays on the same area of the window. The duplicate uses an extra element, this can be a pseudo element if you do not wish to modify HTML structure. Flex can also be used to center body.
I saw a cool tutorial today about blurring content with CSS box-shadows, text-shadows, opacity, and color.
Here's the demo: http://tympanus.net/Tutorials/ItemBlur/
And the tutorial: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
