Hướng dẫn sử dụng thuộc tính filter trong css để tùy biến giao diện

filter là thuộc tính áp dụng để làm các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho các element. filter thường được sử dụng để điều chỉnh kết xuất hình ảnh, nền và đường viền

Để tìm hiểu nhiều hơn về filter các bạn có thể tham khảo thêm ở MDN web docs

Sau đây là một số ví dụ mẫu mà các bạn có thể thử hiệu ứng ngay

filter: blur(5px);

filter: brightness(0.4);

filter: contrast(200%);

filter: drop-shadow(16px 16px 20px blue);

filter: grayscale(50%);

filter: hue-rotate(90deg);

filter: invert(75%);

filter: opacity(25%);

filter: saturate(30%);

filter: sepia(60%);

filter: contrast(175%) brightness(3%);

Trong đó bạn có thể kết hợp 2 thuộc tính invert và hue-rotate để tạo hiệu ứng website của mình thành chế độ Dark Mode.

filter: invert(1) hue-rotate(180deg);

Bộ lọc invert giúp đảo ngược bảng màu của ứng dụng. Vì vậy, đen trở thành trắng và trắng trở thành đen và tương tự cho tất cả các màu.

Bộ lọc hue-rotate giúp chúng ta có tất cả các màu khác không phải là màu đen và trắng. Xoay màu 180 độ, mình đảm bảo chủ đề màu sắc của ứng dụng không thay đổi mà chỉ làm giảm màu sắc của nó.

Bạn có thể áp dụng luôn invert(1) hue-rotate(180deg) cho thẻ img để có hiệu ứng đảo ngược.

Nếu bạn thấy nội dung chia sẻ này có ích với bạn hãy Donate để tạo động lực cho tôi viết các bài viết tiếp theo nhé. Cảm ơn nhiều !!!!