5 thủ thuật CSS bạn có thể sử dụng với ảnh trong web design

Bạn có thể sử dụng một số cách style CSS cho ảnh để làm cho chúng trở nên khác biệt, ấn tượng hơn so với những bức ảnh thông thường. Hãy cùng xem xét một vài cách sau.

Ta có thể sử dụng thuộc tính box-shadow để thêm hiệu ứng đổ bóng cho các bức ảnh hoặc nút bấm.

img {
  box-shadow: 8px 8px 10px #aaa;
}

Bạn cũng có thể sử dụng thuộc tính border để trang trí cho bức ảnh

Img {
   border: 15px solid #3e2b14;
  padding: 10px;
}

Nếu bạn muốn phá cách không còn giữ lại hình dạng vuông vức của bức ảnh, thuộc tính border-radius chính là thứ bạn cần

img {
  border-radius: 30px;  // partially rounded corners
}
 
img {
  border-radius: 100%; // full circular image
}

Nếu bạn muốn trình diễn một bức ảnh với màu sắc trong suốt, thuộc tính opacity rất hữu ích.

img {
  opacity: 0.5;
}

Và cuối cùng, bạn có thể tạo hiệu ứng photo-filter với thuộc tính linear-gradient

.imageDiv {
  background-image:
	linear-gradient(
  	rgba(0, 0, 0, 0.5),
  	rgba(0, 0, 0, 0.5)
	),
   background: url(“images/rust.png”);
}

Cám ơn các bạn đã đọc bài viết! Source: https://www.godaddy.com/garage/webpro/design/6-simple-css-tricks-for-images/