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ụ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

Add Comment

Blogger, CSS

Thứ Tư, 30 tháng 1, 2013

Lunafy

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

Related Posts