Bước vào trong thế giới CSS, hiệu ứng đổ bóng không chỉ là một yếu tố trang trí, mà còn là một phần quan trọng của thiết kế web hiện đại. Trong bài viết này CNET tiếp tục đưa các bạn độc giả khám phá cách áp dụng hiệu ứng đổ bóng trong CSS để tạo ra các giao diện đẹp mắt và thu hút người dùng. Đồng thời CNET sẽ đồng hành cùng các bạn tìm hiểu về các kỹ thuật và cách sử dụng hiệu quả nhất cho các trang web, bây giờ chúng ta cùng đi vào nội dung bài viết nhé.
- Hiệu ứng đổ bóng trong CSS là gì?
- Tìm hiểu về thuộc tính text-shadow
- Thuộc tính box-shadow trong CSS
1. Hiệu ứng đổ bóng trong CSS là gì?
Hiệu ứng đổ bóng trong CSS là một kỹ thuật thiết kế web để thêm các hiệu ứng bóng đổ vào các phần tử HTML mà không cần sử dụng hình ảnh. Kỹ thuật này giúp tạo ra sự sâu sắc, kết cấu và nhấn mạnh cho các phần tử trên trang web, tạo ra một giao diện thu hút người dùng. Bằng cách sử dụng thuộc tính box-shadow và text-shadow trong CSS, có thể điều chỉnh độ mờ, độ trong suốt, màu sắc và hình dạng của bóng đổ để tạo ra các hiệu ứng đa dạng và phong phú.
2. Tìm hiểu về thuộc tính text-shadow
Text-shadow trong CSS là một thuộc tính được sử dụng để thêm bóng cho văn bản trên trang web. Sử dụng thuộc tính tạo ra bóng cho văn bản, giúp nó nổi bật và dễ dọc hơn.
Về cú pháp của thuộc tính text-shadow được biểu diễn như sau:
text-shadow: h-shadow v-shadowt blur-radius color;
Trong đó:
- h-shadow: Độ lệch theo trục ngang của bóng đổ (gọi là trục X).
- v-shadow: Độ lệch theo trục dọc của bóng đổ ( gọi là trục Y).
- blur-radius: Độ mờ của bóng đổ.
- color: Màu sắc của bóng đổ.
Như trong ví dụ trên, thẻ h1 sử dụng thuộc tính text-shadow: 2px 2px 5px red;. Điều này có nghĩa là:
- Độ lệch theo trục ngang của bóng đổ là : 2px
- Độ lệch theo trục dọc của bóng đổ là : 2px
- Độ mờ của bóng đổ là: 5px
- Màu sắc của bóng đổ là màu đỏ: red
Ngoài ra khi muốn thêm nhiều bóng vào văn bản, ta có thể thêm danh sách bóng rồi sau đó phân tách bằng dấu phẩy.
Ví dụ dưới đây hiển thị văn bản màu trắng với bóng đen, hồng và đỏ:
Một tác dụng khác khi sử dụng thuộc tính text-shadow, có thể sử dụng thuộc tính text-shadow để tạo đường viền đơn giản xung quanh một số văn bản (không có bóng):
Văn bản trên có màu hồng và lớp viền border được tạo là màu đen
3. Thuộc tính box-shadow trong CSS
Thuộc tính box-shadow trong CSS được sử dụng để thêm bóng cho phần nội dung của một phần tử trên trang web. Khác với text-shadow mà áp dụng cho văn bản, box-shadow được áp dụng cho phần nền hoặc các phần tử khối như div, ô vuông,...
Cú pháp của thuộc tính box-shadow được biểu diễn:
box-shadow: h-shadow v-shadow blur spread color inset;
Trong đó:
- h-shadow: Độ lệch ngang của bóng
- v-shadow: Độ lệch dọc của bóng.
- blur-radius: Độ mờ của bóng.
- spread: Mở rộng hoặc thu hẹp bóng.
- color: Màu của bóng.
- inset (tùy chọn): Nếu có, bóng sẽ được vẽ bên trong phần tử thay vì bên ngoài.
Trong ví dụ trên, thẻ div có nền màu hồng
- Độ lệch ngang của bóng là 10px
- Độ lệch dọc của bóng là 10px
- Độ mờ là 5px
- Có màu bóng là màu xanh nhạt: lightblue
- Bóng được vẽ bên trong vì có giá trị inset
Cũng tương tự như thuộc tính text-shadow, khi muốn thêm nhiều bóng vào phần tử, ta có thể thêm danh sách bóng rồi sau đó phân tách bằng dấu phẩy.
Ví dụ bên trên, thẻ div có id=”a” có bóng lần lượt là xanh dương, đỏ và xanh lá.
Sử dụng hiệu ứng đổ bóng một cách sáng tạo có thể tạo ra sự chuyển động và sâu sắc cho giao diện trang Web, giúp nâng cao trải nghiệm người dùng và làm cho Website trở nên ấn tượng hơn. Hãy vận dụng những kiến thức này áp dụng vào Website của bạn và cùng thực hành mỗi ngày để thành thạo kỹ năng chuyên môn hơn.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
