Manipulate in CSS and Animate in CSS
Index:
Manipulate img CSS with CSS filter
Change color of PNG image CSS?
Change color of JPG image CSS?
Change color of background image CSS?
Change color of any image CSS?
use CSS filter to: css filter change saturation | css filter change grayscale | css filter change contrast | css filter change brightness | css filter change blur | css filter change invert | css filter change sepia | css filter change hue-rotate | css filter change opacity
Here's how to:
HTML part for the IMGs:
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="saturate">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="grayscale">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="contrast">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="brightness">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="blur">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="invert">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="sepia">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="huerotate">
<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="rss opacity">
CSS part to manipulate the IMGs:
.saturate {
-webkit-filter: saturate(3);
-moz-filter: saturate(3);
-o-filter: saturate(3);
filter: saturate(3);
}
.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.contrast {
-webkit-filter: contrast(160%);
-moz-filter: contrast(160%);
-o-filter: contrast(160%);
filter: contrast(160%);
}
.brightness {
-webkit-filter: brightness(0.25);
-moz-filter: brightness(0.25);
-o-filter: brightness(0.25);
filter: brightness(0.25);
}
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
}
.invert {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
filter: invert(100%);
}
.sepia {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
filter: sepia(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.rss.opacity {
-webkit-filter: opacity(50%);
-moz-filter: opacity(50%);
-o-filter: opacity(50%);
filter: opacity(50%);
}
Note that you'll need vendor prefixes to get good browser support where -moz is firefox I guess, -o should be opera and so on...
And here is the result:
Awesome isnt it? No? Well now check out how to use them in animations !
CSS Animations
Animate imgs CSS
Animate img color CSS
Animate div color CSS
Here's how to:
HTML part for the IMGs:
<div id="background-color">
Animating Background jpg IMG
</div>
CSS part to manipulate the IMGs:
#background-color{
background-image: url(asteroids-pattern.jpg);
color: white;
height: 200px;
-webkit-animation: changeColor 5s infinite;
-moz-animation: changeColor 5s infinite;
-o-animation: changeColor 5s infinite;
animation: changeColor 5s infinite;
}
@-webkit-keyframes changeColor {
0% {
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-o-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-o-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@-moz-keyframes changeColor {
0% {
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-o-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-o-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@-o-keyframes changeColor {
0% {
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-o-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-o-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@keyframes changeColor {
0% {
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-o-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-o-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
So basically you start by setting the animation: changeColor 5s infinite; on an element while "changeColor" will be the name of the keyframe - you can replace it with whatever you like. "5s" is the animation speed. By "infinite" you set the the repeat to infinite.
Then You create the animation with "@keyframes" + the name of your animation. Here it was "changeColor" as set above. Lastly you set keyframes with %. So 0% is the very beginning of the "5s" animation time while 100% is the end -> 5 seconds.
And here is the result:
Animate background opacity
Animate imgs opacity CSS
Animate img opacity CSS
Animate div opacity CSS
Animate opacity CSS
Here's how to:
HTML part for the IMGs:
<div id="background-opacity">
Animating opacity
</div>
CSS part to manipulate the IMGs:
#background-opacity{
background-image: url(asteroids-pattern.jpg);
color: white;
height: 200px;
-webkit-animation: changeOpacity 5s infinite;
-moz-animation: changeOpacity 5s infinite;
-o-animation: changeOpacity 5s infinite;
animation: changeOpacity 5s infinite;
}
@-webkit-keyframes changeOpacity {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes changeOpacity {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes changeOpacity {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes changeOpacity {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
You can also nest 2 data that have the same value with a comma separation like: 0%, 100%{ opacity:0; }
And here is the result:
This way, you can animate everything that comes to your mind! Just change the keyframes with the value you want
- Awesome
Thibault Jan Beyer
Hi, I'm a student in communication design. Living, working, loving and playing in Bonn and Cologne. Open minded and thinking outside the box. And as your creative mate I am here to empower your customers through better design and creative solutions. Follow me if you are interested in reading about the things I'm learning. Enjoy your stay and feel free to chat with me.
- TJB, your creative mate