CSS Shadows

Summary

• box-shadow: 5px 5px 20px 5px #000; - Horizontal/Vertical offset/ Blur radius/ Spread radius/ Color
• text-shadow: 3px 3px 3px hotpink - Giống box shadow nhưng không có spread.
• Có thể set multiple box shadow 

Shadow

Box Shadow

• Box Shadow: adding shadows to the box of an HTML element. It works on block elements and inline elements.
  • box-shadow: 5px 5px 20px 5px #000;
    • Horizontal offset: Số dương thì push bóng về bên trái, số âm thì push về bên phải
    • Vertical offset: Số dương thì push bóng về top, số âm push về phía bottom
    • Blur radius: Số càng lớn thì border càng bị blur nhiều.
    • Spread radius: Số lớn thì tăng size của bóng, số nhỏ thì giảm sai
    • Color: Màu của shadow

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}
 
/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

• Multiple shadow: Có thể set nhiều shadow cho cùng 1 element
• Border radius có thể ảnh hưởng tới shadow. Nếu không muốn hiển thị shadow thì có thể set overflow: hidden cho phần tử cha bao ngoài.

Text Shadow

• text-shadow: 3px 3px 3px hotpink - Tham số giống box shadow nhưng không có Spread

Drop shadow

figure img {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}