Đã đăng vào thg 9 20, 2020 10:52 SA 2 phút đọc
Nếu bạn từng học CSS, thì chắc bạn có thể biết thuộc tính box-shadow. Ngoài ra thì có một CSS filter có tên tương tự là drop-shadow. Trong bài viết ngắn này chúng ta hãy cùng nhau tìm hiểu về drop-shadow nha các bọn.
Cú pháp của box-shadow nè: box-shadow: offset-x offset-y blur-radius spread-radius color
Bạn tham khảo đầy đủ tại đây nha
Cú pháp của drop-shadow nè: drop-shadow[offset-x offset-y blur-radius color]
Bạn tham khảo đầy đủ tại đây nha
drop-shadow là một filter. Giống như box-shadow, chúng ta có thể chuyển các giá trị cho offset-x, offset-y, bán kính mờ và màu sắc. Khác với box-shadow, drop-shadow không nhận tham số spread.
Tại sao drop-shadow hữu ích ?
Trời sinh box sao còn sinh drop ? [Bé tập làm văn]
Nếu có box-shadow, tại sao lại cần thêm drop-shadow nhỉ.
Mình cũng đi qua một vài ví dụ đơn giản để hiểu thêm nha
1. Style những khối mà không phải hình chữ nhật
Tên ví dụ khó hiểu quá, tóm lại là thế này này Ví dụ thông thường bạn làm đổ bóng cho cái logo có thẻ Nhưng bạn mong muốn đổ bóng cho phần chữ thôi, lúc đó chúng ta sẽ sử dụng drop-shadow, kết quả thế này nè:
Ngoài ra nó cũng hoạt động với thuộc tính inline như background... Bạn tự thử nha.
2. Style phần tử bị cắt
Ví dụ như bạn sử dụng thuộc tính clip-path để cắt sau đó áp dụng box-shadow thì phần đổ bóng đó cũng bị cắt luôn. Để giải quyết thì bạn áp dụng filter drop-shadow cho phần tử cha của phần tử bạn cắt là được.
Ngoài ra bạn cũng có thể áp dụng nhiều drop-shadow một lần để có những style toẹt vời.
Hạn chế
Như đã nói ở trên thì drop-shadow không nhận tham số spread cho nên chúng ta không thể style những hiệu ứng outline được.
Hy vọng qua bài viết này bạn có thể sử dụng filter drop-shadow linh hoạt để giải quyết những thứ mà có thể box-shadow không làm được.
Tham khảo tại: //css-irl.info/drop-shadow-the-underrated-css-filter/?utmcampaign=drop-shadow-the-underrated-css-filter
All rights reserved
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: drop-shadow[16px 16px 20px blue];
drop-shadow[16px 16px 20px blue]
Áp dụng
filter: hue-rotate[90deg];
filter: contrast[175%] brightness[3%];
contrast[175%] brightness[3%]
Áp dụng
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];
invert[1] hue-rotate[180deg]
Áp dụng
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.
The A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. Note: This function is somewhat similar to the drop-shadow[]
CSS function applies a drop shadow effect to the input image. Its result is a .
Try it
box-shadow
property. The box-shadow
property creates a rectangular shadow behind an element's entire box, while the drop-shadow[]
filter function creates a shadow that conforms to the shape [alpha channel] of the image itself.Syntax
drop-shadow[offset-x offset-y blur-radius color]
The drop-shadow[]
function accepts a parameter of
type [defined in the
box-shadow
property], with the exception that the inset
keyword and spread
parameters are not allowed.
Parameters
offset-x
offset-y
[required]
Two values that determine the shadow offset.
offset-x
specifies the horizontal distance, where negative values place the shadow to the left of the element. offset-y
specifies the vertical distance, where negative values place the shadow above the element. If both values are 0
, the shadow is placed directly behind the element.
blur-radius
[optional]The shadow's blur radius, specified as a . The larger the value, the larger and more blurred the shadow becomes. If unspecified, it defaults to
0
, resulting in a sharp, unblurred edge. Negative values are not allowed.
color
[optional]The color of the shadow, specified as a
. If unspecified, the value of the
color
property is used.
Examples
Setting a drop shadow using pixel offsets and blur radius
/* Black shadow with 10px blur */
drop-shadow[16px 16px 10px black]
Setting a drop shadow using rem offsets and blur radius
/* Reddish shadow with 1rem blur */
drop-shadow[.5rem .5rem 1rem #e23]
Specifications
Filter Effects Module Level 2 # funcdef-filter-drop-shadow |
Browser compatibility
BCD tables only load in the browser