Trong bài viết, chúng ta sẽ sử dụng hai thuộc tính border-radius và box-shadow trong CSS3 để trang trí và làm cho hình ảnh trở nên bắt mắt hơn.
Đầu tiên, bạn định nghĩa phong cách cho hình ảnh như sau:
img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } img:hover { box-shadow: 1px 1px 1px grey; }
Hình ảnh sẽ có phong cách là 1 đường viền nét liền tông màu xám nhạt (#ddd). Khoảng cách giữa hình ảnh và đường viền là 5 pixels được định nghĩa thông qua thuộc tính padding:5px. Khi rê chuột lên (img:hover) thì hình ảnh sẽ thay đổi phong cách có thêm 1 bóng mờ màu xám.
Tiếp đến bạn định nghĩa hình ảnh bằng thẻ <img> và phần tử <a> bọc bên ngoài để tạo liên kết và hiệu ứng khi rê chuột lên hình ảnh.
<a href="test1.html"><img src="girl.jpg" alt="Girl"></a> <a href="test2.html"><img src="swim.jpg" alt="Swim"></a>
Kết quả: Hình bên trái có bóng mờ khi rê chuột lên, hình bên phải chỉ có đường viền.
Toàn bộ mã nguồn:
<!DOCTYPE html> <html> <head> <title>Image with CSS3</title> <style> img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } img:hover { box-shadow: 1px 1px 1px grey; } </style> </head> <body> <a href="test1.html"><img src="girl.jpg" alt="Girl"></a> <a href="test2.html"><img src="swim.jpg" alt="Swim"></a> </body> </html>
Ngoài ra, bạn có thể kết hợp nhiều thuộc tính khác để tạo hình ảnh như mong muốn.
Kênh YouTube: https://www.youtube.com/user/Dammio
- APA:
Dammio. (2016). Tạo hiệu ứng viền và bóng mờ cho hình ảnh với CSS3. https://www.dammio.com/2016/09/28/tao-hieu-ung-vien-va-bong-mo-cho-hinh-anh-voi-css3.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {Tạo hiệu ứng viền và bóng mờ cho hình ảnh với CSS3},
year = {2016},
url = {https://www.dammio.com/2016/09/28/tao-hieu-ung-vien-va-bong-mo-cho-hinh-anh-voi-css3},
urldate = {2025-05-02}
}