Hướng dẫn filter drop-shadow css
|
Show Đã đă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è: Bạn tham khảo đầy đủ tại đây nha Cú pháp của drop-shadow nè: 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ậtTê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ắtVí 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: https://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
Để tìm hiểu nhiều hơn về 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 filter: invert(1) hue-rotate(180deg); invert(1) hue-rotate(180deg) Áp dụng Bộ lọc Bộ lọc Bạn có thể áp dụng luôn 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 The Parameters
Two blur-radius
(optional)The shadow's blur radius, specified as a color (optional)The color of the shadow, specified as a
ExamplesSetting a drop shadow using pixel offsets and blur radiusSetting a drop shadow using rem offsets and blur radiusSpecifications
Browser compatibilityBCD tables only load in the browser See also |
