Thủ thuật chuyển ảnh màu thành ảnh trắng đen bằng CSS

Thông thường để chuyển từ ảnh mầu thành ảnh đen trắng bạn thường phải dùng Photoshop để chỉnh sửa. Tuy nhiên với kỹ thuật mới từ 3 bạn hoàn toàn biến ảnh mầu thành ảnh đen trắng trên web mà không cần phải xử lý bằng photoshop.

Thủ thuật này sử dụng css để lọc mầu hiển thị trên web, không đổi hẳn ảnh mầu thành đen trắng, nếu download ảnh về thì nó vẫn là ảnh mầu.

 Thủ thuật chuyển ảnh màu thành ảnh trắng đen bằng CSS

Dưới đây là code CSS.

1
2
3
4
5
6
7
8
img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(http://visaonho.com/assets/desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

Code nhúng ảnh.

<img class="desaturate" alt="back and white" src="Beautiful-girl.jpg" width="450" height="253" />

Các bạn download fille desaturate.svg rồi upload lên host của bạn. Nếu upload lên host khác domain sẽ không chạy được code này.

Chúc các bạn thành công.

(nguồn: visaonho.com – thuthuatwordpress.org)

Cùng Danh Mục

Liên Quan Khác

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>