Blogger Ever

How to create an interactive featured post widget using CSS3 (filter) ?

This post will tell you how can you create a fascinating,animated and sleek design featured post widget.The property used in this widget is filter that is such a helpful property of CSS3.

Featured post widget creates a few links in your blog that readers are convinced to read.However,the attractiveness towards these widgets can increase the views on your posts.In this post I'm going to use a CSS3 property of filter that can amazingly add a few interactive effects to your objects and will describe the property of filter in detail.So lets begin with a a demo :
See the Pen interactive featured post widget using CSS3 by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

The only reason to introduce this featured post widget is to introduce one of the useful property of CSS3 that is filter.

filter

filter can have a large number of uses specially in customization and animation in different aspects.Black and white and blurriness is possible through jQuery plugins but the most better way to do it is to use this property.

The functions that can be done by filter are:
url()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

The browsers that are supported are

ChromeFirefoxIE 9Safari iOSAndroidOperaOpera Mini
Yes
-webkit-
NoNoYes
-webkit-
Yes
-webkit-
Yes
-webkit-
No
Internet Explorer 9 uses a non-standard filter,read this for more info.

Examples

This is an image on which the filter is going to be applied.

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

The url() contain svg source.

Use several at once: To use filter multiple time on a single element ad like this one
filter: blur(5px) opacity(0.5);
There are several properties like opacity and box-shadow that have separate properties in CSS3 but filter also have values for that.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.