Hiệu ứng thay đổi màu cho ảnh trong Blogger

Hiệu ứng thay đổi màu cho ảnh trong Blogger

Đây là thủ thuật thay đổi màu săc hình anhr bài viết trong Blogger/Blogspot khi rê chuột, màu sắc sẽ thay đổi. CSS3 Filters to Image. Áp dụ...
Comment 1/30/2013
CSS3 bloggerĐây là thủ thuật thay đổi màu săc hình anhr bài viết trong Blogger/Blogspot khi rê chuột, màu sắc sẽ thay đổi. CSS3 Filters to Image.
Áp dụng các cho tất cả hình ảnh hoặc hình ảnh bạn càn làm hiệu ứng.

Code: chèn trước thẻ  ]]></b:skin>  trong template

Grayscale
img {
    -webkit-filter:grayscale(1);
}
img:hover {
    -webkit-filter:grayscale(0);
}

Saturate
img {
    -webkit-filter:saturate(4);
}
img:hover {
    -webkit-filter:saturate(1);
}

Sepia
img {
    -webkit-filter:sepia(1);
}
img:hover {
    -webkit-filter:sepia(0);
}

Hue Rotate
img:hover {
    -webkit-filter:hue-rotate(360deg);}

Invert
img {
    -webkit-filter:invert(1);
}
img:hover {-webkit-filter:invert(0);
}

Brightness
img {
    -webkit-filter:brightness(-0.5);}
img:hover {-webkit-filter:brightness(0);
}

Hue-rotate and Animate
@-webkit-keyframes hue { 
    100% { -webkit-filter:hue-rotate(360deg); }  
}
img:hover {
    -webkit-animation:hue 1s linear infinite;
}

Grayscale and Brightness
img { 
    -webkit-filter:grayscale(1) brightness(-0.4);
}
img:hover {-webkit-filter:grayscale(0) brightness(0);
}

Demo

Grayscale



Saturate


Sepia


Brightness



Grayscale and Brightness