Tom’s Two Cents: Go Home, CSS. You’re Drunk.

August 12, 2014

Blog | Development | Tom’s Two Cents: Go Home, CSS. You’re Drunk.
Tom’s Two Cents: Go Home, CSS. You’re Drunk.

How to create a fancy, blurry technique with CSS3.

Does that image seem blurry to you? It’s not, you must be drunk… Just kidding! How cool is this effect?!

I’m a big fan of CSS and all the awesome things it can do. Recently, I worked on a project that required I create a blurry effect on a background image while keeping the rest of the image clear.

Keep reading to find out how I used CSS3 and how you can create nifty images like this too.

To achieve this, I created a wrapper <div> and 2 child <div>’s.  Both child <div>’s would contain the background image.  One <div> would be blurry using the new CSS3 Filters property while the 2nd <div> would be clear and absolutely positioned over the first to make it look like it was still one image.

You can see the code below as an example and check out a quick demo here. 

You’ll need to view the demo in Chrome since CSS3 Filters aren’t supported yet in any other browser.


<div class="box">
    <div class="blurry"></div>
    <div class="blurry__inner"></div>
</div> 

.box {
    height: 250px;
    position: relative;
    width: 250px;
}
.blurry,
.blurry__inner {
    background-image: url('http://lorempixel.com/250/250/people/6');
    background-repeat: no-repeat;
    position: absolute;
}
.blurry {
    background-position: left top;
    height: 250px;
    -webkit-filter: blur(3px) brightness(50%);
    width: 250px;
}
.blurry__inner {
    background-position: 50% 50%;
    border: 8px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    box-sizing: border-box;
    height: 150px;
    left: 50%;
    margin: -75px 0 0 -75px;
    top: 50%;
    width: 150px;
}

I think it’s a fun technique to grab the attention of the user and serve as a little ‘nice to have’ feature.

Do you have any CSS tips you’d like to share? Tweet us @GeekHive.

Tom Deluca, Front-End Developer, GeekHive

Tom DeLuca

Developer
Tags
  • CSS
  • Design
  • Development

Recent Work

Check out what else we've been working on