CSS-filter saturate

by Vladimir

HTML

Background is #F00 (RED)<br />
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<span class="r1 green">
    R1, Background is #0F0 (GREEN)<br />
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
        <img src="http://cs7003.vk.me/v7003685/1ddd/jZ8LZcwYN20.jpg" />
    <span class="r2 blue">
        R2, Background is #00F (BLUE)<br />
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
        <img src="http://cs7003.vk.me/v7003685/1ddd/jZ8LZcwYN20.jpg" />
    </span>
</span>

CSS

body {
    -webkit-filter: hue-rotate(270deg);
    background: #F00;
}
div {
    width:50px;
    height: 50px;
    overflow: hidden;
    float: left;
    border: 2px solid #FFF;
}
.red {
    background: #F00;
}
.green {
    background: #0F0;
}
.blue {
    background: #00F;
}
.r1 {
   /* -webkit-filter: hue-rotate(-270deg);*/
}
.r2 {
    -webkit-filter: hue-rotate(0deg);
}
.r1,
.r2 {
    margin: 5px;
    clear: both;
    padding: 5px;
    border:1px solid #000;
    display:block;
    overflow: hidden;
}
img {
    display: block;
    clear: both;
}