Shadow trong CSS:
Trong CSS, bạn có thể thêm hiệu ứng bóng (shadow) cho các phần tử bằng cách sử dụng thuộc tính box-shadow hoặc text-shadow. Dưới đây là một số ví dụ về cách sử dụng các loại bóng khác nhau:
- Box Shadow:
css
.box-with-shadow {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
Trong ví dụ trên, chúng ta tạo một hộp có bóng từ phía dưới cùng bên phải với độ bóng mờ là 10px và màu đen nhạt.
- Box Shadow với Nhiều Layer:
css
.multi-layer-shadow {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3),
-5px -5px 10px rgba(255, 255, 255, 0.3);
}
Trong ví dụ này, chúng ta tạo một hộp với bóng đồng thời ở phía dưới cùng bên phải (màu đen nhạt) và ở phía trên cùng bên trái (màu trắng nhạt).
- Text Shadow:
css
.text-with-shadow {
font-size: 24px;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
Trong ví dụ này, chúng ta thêm một bóng cho văn bản, tạo hiệu ứng nổi bật hơn.
- Text Shadow với Nhiều Layer:
css
.multi-layer-text-shadow {
font-size: 24px;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
-2px -2px 4px rgba(255, 255, 255, 0.3);
}
Tương tự như ví dụ về box shadow, ví dụ này thêm một layer bóng ở phía dưới cùng bên phải (màu đen nhạt) và một layer ở phía trên cùng bên trái (màu trắng nhạt) cho văn bản.
Lưu ý rằng bạn có thể điều chỉnh các giá trị (độ lệch theo chiều ngang, chiều dọc, độ mờ, màu sắc) trong các ví dụ trên để tạo ra hiệu ứng bóng phù hợp với thiết kế của bạn.