Saturday, July 6, 2013
Adding effects in Image using CSS3
Adding effects in image using CSS3 sounds cool, because many of you might be using photoshop or picasa or instagram or any other image editing application. So let's use CSS3 to add effects in image.
Before you start read this carefully:
The filter property in CSS3 from which we'll add effects is only supported to -webkit- it means only Google Chrome, Safari supports this CSS3 property.
Also i have tried to use -moz- to render that effects in Firefox but it didn't worked. So after some research about it i got to know that it only supports -webkit-.
Okay, first let's start.
CSS: Changing image opacity using CSS3 property: -webkit-filter:opacity(100%);
.image_opacity {
-webkit-filter: opacity(100%); /*Changing image opacity*/
}
-webkit-filter: opacity(100%); /*Changing image opacity*/
}
CSS: Adding Negative effect in image using CSS3 property: -webkit-filter:invert(100%);
.image_negative {
-webkit-filter: invert(100%); /*Adding negative effect*/
}
-webkit-filter: invert(100%); /*Adding negative effect*/
}
CSS: Adding Black & White(Gray scale) effect using CSS3 property: -webkit-filter: grayscale(100%);
.image_b_w {
-webkit-filter: grayscale(100%); /*Adding gray scale effect*/
}
-webkit-filter: grayscale(100%); /*Adding gray scale effect*/
}
CSS: Making images blur using CSS3 property: -webkit-filter: grayscale(100%);
.image_blur {
-webkit-filter: grayscale(100%); /*Making image blur*/
}
-webkit-filter: grayscale(100%); /*Making image blur*/
}
CSS: Adding saturate effect using CSS3 property: -webkit-filter: saturate(200%);
.image_saturate {
-webkit-filter: saturate(200%); /*Adding saturate effect*/
}
-webkit-filter: saturate(200%); /*Adding saturate effect*/
}
CSS: Playing with RGBA using CSS3 property: -webkit-filter: hue-rotate(100deg);
.image_hue {
-webkit-filter: hue-rotate(100deg); /*Playing with RGBA*/
}
-webkit-filter: hue-rotate(100deg); /*Playing with RGBA*/
}
CSS: Adding Sepia effects using CSS3 property: -webkit-filter: sepia(100%);
.image_sepia {
-webkit-filter: sepia(100%); /*Adding sepia effect in image*/
}
-webkit-filter: sepia(100%); /*Adding sepia effect in image*/
}
CSS: Adjusting Brightness in image using CSS3 property: -webkit-filter: brightness(140%);
image_bright {
-webkit-filter: brightness(140%); /*Adjusting brightness in image*/
}
CSS: Adjusting Contrast of image using CSS3 property: -webkit-filter: brightness(140%);
image_contrast {
-webkit-filter: contrast(110%); /*Adjusting Contrast of image*/
}
We have used almost many main effects and now one more awesome thing, we can combine it all together using CSS3 property: -webkit-filter: sepia(50%) invert(100%) opacity(50%);
CSS: Combining it, all together CSS3 property: -webkit-filter: sepia(50%) invert(100%) opacity(50%);
.image_combine_effect {
-webkit-filter: sepia(50%) invert(100%) opacity(50%); /*Example combining of effects*/
}
-webkit-filter: sepia(50%) invert(100%) opacity(50%); /*Example combining of effects*/
}
For more information about the filter property read this documentation here: http://www.w3.org/TR/2013/WD-filter-effects-20130523/
And yes, the reason for using -webkit- before every property is to render the property in -webkit- browsers like Google Chrome, Safari.
And if you want to archive this effects using PHP then PHP's GD library is made for you. Articles coming soon for GD library.
Subscribe to:
Post Comments (Atom)
This is for what i was looking from morning and yup, cheers i got it...clap clap (h)
ReplyDelete:) good!
ReplyDelete