Nếu bạn đang tìm cách tạo hiệu ứng đổ bóng cho nội dung cuộn mà không cần sử dụng JavaScript hoặc pseudo element, bài viết này chính là dành cho bạn. Hôm nay, chúng ta sẽ tìm hiểu cách tạo hiệu ứng Scrolling Shadow chỉ bằng CSS đơn giản.
Mục lục
Điểm nổi bật:
- Không cần JavaScript: Tất cả đều được xử lý bằng CSS.
- Không cần thêm HTML: Bạn không cần tạo thêm thẻ
<div>hoặc<span>nào khác. - Không cần sử dụng pseudo-element: Không cần phải sử dụng
::beforehoặc::after. - Chỉ sử dụng thuộc tính background: Mọi thứ đều được xử lý thông qua thuộc tính
backgroundcủa CSS.
Cách hoạt động của Scrolling Shadow bằng CSS
CSS hỗ trợ việc tạo hiệu ứng bóng cuộn bằng cách sử dụng linear gradient và radial gradient trong thuộc tính background. Chúng ta có thể dễ dàng tạo ra hiệu ứng bóng mờ ở đầu và cuối nội dung khi người dùng cuộn trang.
Mã CSS minh họa:
.scrollbox {
overflow: auto;
--g: radial-gradient(55% 20px, #0009, #0000);
background:
linear-gradient(#fff 10px, #0000 40px calc(100% - 40px), #fff calc(100% - 10px)) local,
var(--g) top /100% 200%,
var(--g) bottom /100% 200%;
}Hiệu ứng Scrolling Shadow chỉ với CSS không chỉ đơn giản mà còn rất hiệu quả. Đây là một trong những kỹ thuật CSS hiện đại mà bạn có thể dễ dàng áp dụng cho trang web của mình, giúp tăng cường trải nghiệm người dùng mà không cần phải lo lắng về hiệu suất hoặc sự phức tạp của mã nguồn.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="scrollbox">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</div>
</body>
</html>.scrollbox {
height: 400px;
overflow: auto;
--g: radial-gradient(55% 20px, #0009, #0000);
background:
linear-gradient(#fff 10px, #0000 40px calc(100% - 40px), #fff calc(100% - 10px)) local,
var(--g) top /100% 200%,
var(--g) bottom /100% 200%;
}Nếu bạn đang tìm cách cải thiện giao diện của vùng nội dung cuộn trên trang web của mình, hãy thử áp dụng ngay kỹ thuật này nhé!