Cách tạo bóng đổ bằng CSS
Trong CSS, thuộc tính box-shadow không độc quyền về hiệu ứng đổ bóng. Tìm hiểu cách thức và thời điểm sử dụng drop-shadow tại bài viết này.
Mặc dù xu hướng thiết kế thay đổi hàng năm, bạn có thể tin tưởng vào việc sử dụng các hiệu ứng bóng chủ yếu như box-shadow và drop-shadow để đóng góp tích cực vào tính thẩm mỹ của trang web. Bạn có thể sử dụng drop-shadow để tạo ra các hiệu ứng dễ chịu, kết xuất đẹp mắt mà không bị sến.
Chúng ta hãy xem xét kỹ hơn thuộc tính drop-shadow của CSS.
Drop-shadow trong CSS là gì?
drop-shadow() là một hiệu ứng CSS hiển thị bóng xung quanh hình dạng của một đối tượng được chỉ định. Đây là cú pháp để áp dụng drop-shadow trong CSS.
filter: drop-shadow(offset-x offset-y blur-radius color);Có một loạt các filter functions bao gồm:
- Làm mờ: blur( )
- Làm sáng: brightness( )
- Đổ bóng: drop-shadow().
offset-x xác định khoảng cách ngang và offset-y xác định khoảng cách dọc.
Lưu ý rằng các giá trị âm đặt bóng ở bên trái ( offset-x ) và phía trên ( offset-y ) đối tượng.
Hai tham số cuối cùng là tùy chọn. Bạn có thể chỉ định bán kính mờ của bóng dưới dạng chiều dài. Theo mặc định, nó được đặt thành 0. Bạn không thể có bán kính làm mờ âm.
Màu của bóng đổ được chỉ định là <color> . Nếu bạn chưa chỉ định một màu, nó sẽ tuân theo giá trị của màu thuộc tính.
Khi nào nên dùng drop-shadow trong CSS?
Bạn có thể đã biết rằng box-shadow thực hiện công việc khá tốt. Vì vậy, bạn có thể nghĩ, tại sao chúng ta cần drop-shadow? Có rất nhiều trường hợp trong đó hàm drop-shadow() là một cứu cánh. Chúng ta hãy xem xét một vài tình huống trong số chúng:
Không giống như bóng đổ hình hộp, bạn có thể thêm bóng đổ vào các hình dạng không phải hình chữ nhật.
Giả sử: chúng ta có SVG hoặc PNG trong suốt có hình dạng không phải hình chữ nhật — ví dụ như một ngôi sao. Ở đây, việc thêm bóng tương ứng với đối tượng chính có thể được hoàn thành với box-shadow hoặc drop-shadow. Xem xét cả hai tình huống:
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Drop-shadow</title>
</head>
<body>
<div class="star-img">
<img class="box-shadow" src="image/Star.png" alt="Ngôi sao">
<img class="drop-shadow" src="image/Star.png" alt="Ngôi sao">
</div>
</body>
</html>Code CSS
.star-img img {
display: inline-block;
height: 15em;
width: 25em;
}
.box-shadow {
color: red;
box-shadow: 0.60em 0.60em 0.2em;
}
.drop-shadow {
filter: drop-shadow(0.60em 0.60em 0.2em);
}Đầu ra:
Khi so sánh cả hai hiệu ứng, rõ ràng là box-shadow tạo ra bóng hình chữ nhật; nó cũng không quan tâm cho dù hình ảnh trong suốt hay đã có nền. Mặt khác, drop-shadow cho phép bạn tạo một bóng đổ phù hợp với hình dạng của chính hình ảnh.
Các yếu tố hạn chế là hàm drop-shadow() chấp nhận tất cả các tham số kiểu <shadow> ngoại trừ từ khóa inset và tham số spread.
Có một số trường hợp khi bạn cần xây dựng các thành phần bằng cách chồng chéo các phần tử nhất định. Nếu bạn đang sử dụng box-shadow, bạn sẽ phải đối mặt với vấn đề cố gắng tạo bóng theo đúng cách. Đây là cách nó hoạt động khi nhóm một hình ảnh và một thành phần văn bản:
HTML
<body>
<div class="parent-container drop-shadow">
<div class="image-container box">
<img src="image/Meo.jpg" alt="Mèo Vlog" />
</div>
<div class="text-container box">
<h2>Mèo Vlog</h2>
<p>Một chiếc mèo thích làm blog. Blog của mèo chuyên chia sẻ các nội dung liên quan đến công nghệ thông tin như: thủ thuật blogspot, code HTML, CSS, JavaScript và SEO.</p>
</div>
</div>
</body>CSS
body {
padding: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande','Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h2 {font-size: 2rem;}
p {font-size: 0.8rem;}
.parent-container {
display: flex;
flex-direction: column;
height: 17rem;
width: 50em;
}
.image-container img {
width: 15em;
position: absolute;
z-index: 1;
top: 2em;
left: 1.5em;
}
.text-container {
color: rgb(255, 236, 236);
background-color: rgb(141 0 35);
width: 30rem;
padding: 3rem;
align-self: flex-end;
position: relative;
}Bây giờ, áp dụng box-shadow và drop-shadow để thấy sự khác biệt.
CSS
.drop-shadow {filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5));}
.box,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3);
}Đầu ra:
Như bạn có thể thấy, box-shadow được áp dụng trên từng phần tử riêng lẻ trong khi drop-shadow nhóm cả hai và áp dụng bóng đổ.
Bạn có thể sử dụng thuộc tính clip-path để cắt một vùng nhất định xác định phần nào của hình ảnh hoặc phần tử sẽ được hiển thị. Filter: drop-shadow cho phép chúng ta tạo drop-shadow trên phần tử được cắt bớt bằng cách áp dụng nó cho phần tử gốc của phần tử đó:
HTML
<body>
<div class="parent-container">
<div class="clipped-element"></div>
</div>
</body>CSS
.parent-container {filter: drop-shadow(0rem 0rem 1.5rem maroon);}
.clipped-element {
width: 50em;
height: 50em;
margin: 0 auto;
background-image: url(image/Meo.jpg);
clip-path: circle(50%);
background-size: cover;
background-repeat: no-repeat;
}Đầu ra:
Mèo đã cắt bớt 50% hình ảnh bằng một đường tròn. Do đó, bộ lọc đổ bóng chỉ được áp dụng cho phần có thể nhìn thấy của hình ảnh. Thật tuyệt vời phải không?
Kết luận
Sự phổ biến của box-shadow là khá rõ ràng vì có vô số trường hợp sử dụng. Tuy nhiên, hàm drop-shadow() không được sử dụng nhiều. Mèo hy vọng rằng bạn sẽ thử nghiệm với các hiệu ứng đổ bóng khác nhau và cố gắng triển khai bóng đổ trong các dự án tương lai của mình.
.png)
Nhận xét