Mục lục

Chuyển ảnh màu thành ảnh trắng đen bằng CSS3

Thủ thuật wordpress Tin tức - 7028 - Quản trị viên

Để có thể chuyển ảnh màu sang ảnh đen tối, thông thường bạn phải dùng photoshop để chỉnh sửa hoặc dùng javascrip để tạo hiệu ứng chuyển màu. Nhưng bây giờ bạn sẽ có những hiệu ứng tương tự như thế mà CSS3 có thể mang lại.

Sau đây mình sẽ hướng dẫn bạn làm bằng CSS3 một cách rất đơn giản , nhanh chóng. Mang hiệu quả tức thì 😀

Trước hết ta có một ảnh màu như dưới:

hiepsoaica

Html :

<img class="img-hover" alt="back and white" src="hiepsoaica.png" />

Nhúng Css cho html trên:

.img-hover{
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
}

Chú thích:

Giá trị % giao động từ 0% tới 100% hoặc từ 0 – 1.
Tác dụng: filter này sẽ giúp cho hình ảnh của bạn chuyển sang trắng đen.

-webkit- (Safari, Chrome)

-khtml- (Konqueror, really old Safari)
-moz- (Firefox)
-o- (Opera)
-ms- (Internet Explorer)

Thực hiện như trên ta sẽ được kết quả như sau 😀
hiepsoaica01

Rất đơn giản phải không :v

Sau đây là các filter rất hay, dùng để chỉnh độ sáng tối , độ tương phản cho ảnh:

– Blur(px)

Áp dụng hiệu ứng mờ cho hình ảnh. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn.
Nếu không có giá trị được xác định, 0 được sử dụng.

Css:

.img-hover{
-webkit-filter: blur(2px);
}

(Ảnh demo)

– Drop-shadow (h-shadow v-shadow blur spread color).

Hiệu ứng bóng đổ

– Sepia(%)

Chuyển đổi hình ảnh sang màu nâu đỏ.
0% (0) là mặc định và đại diện cho hình ảnh gốc.
100% sẽ làm cho hình ảnh hoàn toàn nâu đỏ.

Lưu ý: Các giá trị phủ định không được phép.

– Hue Rotate (deg)

Áp dụng sự xoay màu trên hình ảnh. Giá trị xác định số lượng xung quanh vòng tròn màu mẫu hình ảnh sẽ được điều chỉnh. 0deg là mặc định.
Lưu ý: Giá trị tối đa là 360deg.

– Brightness(%)

Điều chỉnh độ sáng của hình ảnh.
0% sẽ làm cho hình ảnh hoàn toàn đen.
100% (1) là mặc định và đại diện cho hình ảnh gốc.
Các giá trị trên 100% sẽ cho kết quả sáng sủa hơn.

– Contrast(%)

Điều chỉnh độ tương phản của hình ảnh.
0% sẽ làm cho hình ảnh hoàn toàn đen.
100% (1) là mặc định và đại diện cho hình ảnh gốc.
Các giá trị trên 100% sẽ cung cấp kết quả với độ tương phản ít hơn.

– Invert(%)

Đảo ngược các mẫu trong hình ảnh.
0% (0) là mặc định và đại diện cho hình ảnh gốc.
100% sẽ làm cho hình ảnh hoàn toàn đảo ngược.
Lưu ý: Các giá trị phủ định không được phép.

– Opacity(%)

Thiết lập mức độ trong suốt cho hình ảnh. Trong đó:
0% là hoàn toàn trong suốt.
100% (1) là mặc định và đại diện cho hình ảnh gốc (không minh bạch).
Lưu ý: Các giá trị phủ định không được phép.
Mẹo: Bộ lọc này tương tự như thuộc tính opacity.

– Saturate(%)

Làm bão hòa hình ảnh.
0% (0) sẽ làm cho hình ảnh hoàn toàn không bão hòa.
100% là mặc định và đại diện cho hình ảnh gốc.
Các giá trị trên 100% cung cấp kết quả siêu bão hòa.
Lưu ý: Các giá trị phủ định không được phép.

– Url()

Hàm url () lấy vị trí của một tệp tin XML chỉ định một bộ lọc SVG và có thể bao gồm một anchor tới một phần tử bộ lọc cụ thể. Thí dụ:
Bộ lọc: url (svg-url # element-id)

– Initial

Thiết lập thuộc tính này thành giá trị mặc định.

Sau đây là link trang các bạn có thể thực hành luôn các thuộc tính của Filter để hiểu rõ hơn. Rất tiện dụng :v

https://html5-demos.appspot.com/static/css/filters/index.html

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

Nhận Xét Của Khách Hàng

Theo dõi