Kết nối

Tạo hiệu ứng viền và bóng mờ cho hình ảnh với CSS3

13.950 lượt xem 
 Cập nhật lần cuối: 22/12/2016 lúc 09:02:04
Thể loại: Thiết kế Web 

Trong bài viết, chúng ta sẽ sử dụng hai thuộc tính border-radiusbox-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.

1

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>
	&nbsp;
	<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

Liên quan:  [Bootstrap] Phần 5: Bảng
Trích dẫn bài viết
  • 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 = {2024-05-16}
    }
Thẻ: , , , , , , , ,
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x