How to blur the div below the section with CSS 3 without background image?


Tags: html,css

Problem :

How to blur the div below the section thus applying that effect to the section and its content( would like to get OSX Yosemite blur effect without background image ).

Here is the markup.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        section{
            display: table;
            position: relative;
            background: rgba(255,0,0,0.5);
            width: 300px;
            height: 100px;
        }

        section h1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #fff;
        }

        div{
            position: absolute;
            top: 30px;
            left: 10px;
            width: 300px;
            height: 100px;
            background: rgba(255,255,255,0.5);
            filter: blur(4px);
        }


    </style>
</head>
<body>


    <section>
        <h1>There is some content</h1>
    </section>

    <div></div>


</body>
</html>


Solution :

I see that you've got filter: blur. I did some testing with that as well but couldn't get it to work at all in firefox 31. Seems that text-shadow should accomplish something similar.

JSFiddle

.blurred {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

    CSS Howto..

    How do I customize the rdoc Darkfish stylesheet?

    How to do a footer in dompdf 6.0 beta 2?

    How to have a DIV appear after you hover over an image/link/another div?

    How to reduce spacing between navigation links CSS

    How to style five rows with alternating fixed/variable width?

    How to recalculate css with jQuery window resize?

    style a navigation link when a particular div is shown

    How to pause css animation?

    Ajax control toolkit combobox showing weird bullets in dropdown

    How to loop this css slider animation?

    How to set background color for a boxed link?

    How to create CSS-based (big) quotation marks?

    How can I wrap a page with a centered DIV?

    How to override default styles in GWT 2.3?

    How to implement image sticker (ribbon) with css3

    CSS: How to move hint box (a:hover) to the left?

    How to use a custom Style Sheet in WordPress

    How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]

    How to properly use CSS borders to visualize a value chain?

    How to hide a CSS media query from print? “not” logical operator does not work

    In CSS, how to make the colored background be at least 50% of pagewidth and at most 90%, and as wide as necessary?

    How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width

    How to add materialize css to an angularjs project?

    Fancyselect: How to force to open the selector at the bottom?

    How can the top DIV from two stacking DIVs affect the other's height

    how to append a css class to an element by javascript?

    how to add a margin on both sides and center the text in a paragraph?

    How to determine largest possible font-size such that it fits on one line in CSS [closed]

    How to fill page width of tables with css

    How to set background color to the column using CSS?