Thursday 5 February 2015

Blur Effect : CSS

Now and here we'll gonna discover how to create blurred images and element. 
The below example shows You how to to make an image to look blurry.

To do that we use the filter property.

filter: blur(3px);

Two words and 1 value.
The value can  be any number followed by "px".

To make it cross-browser we simply use vendor prefixes.

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);











Example code:

<html>
<head>
<style>
.lee_hyori {
width: 580px;
height: 370px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
</style>
</head>
<body>

<img class="lee_hyori" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg"/>


</body>

</html>


You can use this for everything from images to forms, paragraphs and so on.

No comments:

Post a Comment