CODEWITHSUNDEEP
javascripthtmlcssblur
mnj
mnj

Reputation: 3413

Div blurring its background

I wanted to recreate an effect like on this page: http://goalkicker.com/Angular2Book/

Here's the thing that is interesting: enter image description here

I already found on StackOverflow a few topics about that, but some of them reference sources that do not work, some use methods that do not work with Chrome. Basically I did not find any working example.

On the website, which I provided, the div has the following CSS:

#headerBackground {
    width: 100%;
    min-height: 50px;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #ffffff;
    z-index: 3;
    opacity: 0.6;
    box-shadow: 0px 0px 18px 0px #cccccc;
}

his is obviously not enough, the "blur/glass" part is missing. Is it possible to look "deeper" into the website's internals to reveal how it's done?

Upvotes: 0

Views: 105

Answers (2)

Pradeep Sambandam
Pradeep Sambandam

Reputation: 683

You have to place a div similar to the following before the tag at the bottom.

This is for header

<div style="left: 0px; z-index: 2; overflow: hidden; top: 0px; position: fixed; width: 1349px; height: 50px;">
    <div style="position: absolute; background-color: rgb(255, 255, 255); filter: blur(10px); z-index: 1; width: 1100px; height: 3672px; left: 125px; top: 90px;">
    </div>
</div>

This is for footer

<div style="left: 0px; z-index: 2; overflow: hidden; bottom: 0px; position: fixed; width: 1369px; height: 80px;">
    <div style="position: absolute; background-color: rgb(255, 255, 255); filter: blur(10px); z-index: 1; width: 1100px; height: 3672px; left: 125px; top: -130px;">
    </div>
</div>

If needed you can change the width of the parent div to 100% instead of exact with generated by js(I think).

And this is how the reference site's blur effect is done.

Upvotes: 1

A. SOUMER
A. SOUMER

Reputation: 11

-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */

filter: blur(5px);

Upvotes: 0

Related Questions