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