Home Web Development CSS Blurred Background CSS

Blurred Background CSS

Blurred Background CSS snippet. While waiting for the official property, the trick is to create blurred version of the background, and set the background property both of them (main body background and box that want to be blurred) to be cover sized and fixed.

HTML code:


<div id="box1" class="box blurred-bg tinted">
  <div class="content">
    <h1>Blurred Background</h1>
	    <h2>By <a href="http://ariona.net" rel="follow" target="_blank">Ariona, Rian</a></h2>
    	<p>Drag this box to move around</p>
    <p class="related">See also: <a href="https://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged Dropdown Animation</a></p>  
  </div>
</div>

SCSS code:

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);

$normal-img:"https://lh4.googleusercontent.com/-3eBjuQpOGFw/U47yh_-OycI/AAAAAAAAI2U/uaU5pK49N1w/s1600/normal.jpg";
$blurred-img:"https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg";

body{
	background-image:url($normal-img);
	background-repeat:no-repeat;
	background-size: cover;
	background-attachment: fixed;

	font-family:Raleway, Open Sans, Droid Sans, Roboto,arial, sans-serif;
}
.blurred-bg{

	background-image:url($blurred-img);
	background-repeat:no-repeat;
	@include background-size(cover);
	background-attachment: fixed;
   
	&.tinted{
		@include background-image(linear-gradient(0deg, rgba(255,255,255,.2),rgba(255,255,255,.2)),url($blurred-img));
	}
	&.shaded{
		@include background-image(linear-gradient(0deg, rgba(0,0,0,.2),rgba(0,0,0,.2)),url($blurred-img));
	}
}
.box{
	width:500px;
	height:300px;
  left:-webkit-calc( 50% - 250px );
  top:20%;
	position:absolute;
	border-radius:5px;
	@include box-shadow(0 20px 30px rgba(0,0,0,.6));
	border:1px solid rgba(255,255,255,.3);
	padding:20px;
	text-align: center;
	@include box-sizing(border-box);
	text-shadow:0 1px 1px rgba(0,0,0,.4);
  display: flex;
  transition: box-shadow .3s ease;
  
	&:active{
    cursor:move;
    @include box-shadow(0 20px 50px rgba(0,0,0,.9));
  }
  
  .content{
    margin: auto;
  }
}
h1,h2,a,p{
	color:white;
	font-weight:100;
  
	.tinted &{
		color:black;
		text-shadow:0 1px 1px rgba(255,255,255,.2);
	}
}
h2{ font-size: 14px }
p{ 
  margin: 20px;
  &.related{
    text-transform: uppercase;
    font-weight: 700;
    color: #444;
    
    a{
      font-weight: 700;
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
  }
}

JS code:

$(function() {
	$( ".box" ).draggable();
});

Libraries needed:

https://code.jquery.com/jquery-2.2.4.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js

Demo:

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

The Binary Search Algorithm in JavaScript

In this post, I'll compare linear search and binary search algorithms. You'll see pseudocode for each algorithm, along with examples and a...

JavaScript Callbacks, Promises, and Async Functions|Part 2

Introduction In part one of this tutorial, we learned the principles behind asynchronous programming and using callbacks. To review,...

JavaScript Callbacks, Promises, and Async Functions| Part 1

Introduction There is a lot of talk about asynchronous programming, but what exactly is the big deal? The big...

JavaScript Best Practices for Beginners

1. Use === Instead of == JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to...

Recent Comments

Sathish Kumar Ramalingam on Angular 2 Admin LTE Theme Integration