CSS Styling Images

0
85
  • Các cách chỉnh hình ảnh.

Thuộc tính border-radius.

  • Sử dụng thuộc tính border-radius để tạo border tròn cho hình ảnh.

Ví dụ:

img {
  border-radius: 50%;
}
<img src="paris.jpg" alt="Paris" width="300" height="300">

Thumbnail Images.

  • Sử dụng thuộc tính border.

Ví dụ:

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris" style="width:150px">

Responsive Images.

  • Hình ảnh sẽ tự động điều chỉnh để phù hợp với kích thước của màn hình.

Cú pháp:

img {
  max-width: 100%;
  height: auto;
}
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">

Căn giữa hình ảnh.

Cú pháp:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<img src="paris.jpg" alt="Paris" style="width:50%">

Polaroid Images / Cards.

Ví dụ:

<div class="polaroid">
  <img src="img_5terre.jpg" alt="5 Terre" style="width:100%">
  <div class="container">
  <p>Cinque Terre</p>
  </div>
</div>

<div class="polaroid">
  <img src="lights600x400.jpg" alt="Norther Lights" style="width:100%">
  <div class="container">
  <p>Northern Lights</p>
  </div>
</div>

Hình ảnh trong suốt.

  • Thuộc tính opacity có thể lấy giá trị từ 0.0 đến 1. Giá trị càng thấp, độ trong suốt càng cao.

Ví dụ:

Cú pháp:

img{
  opacity: 0.5 ;
}

Image Text.

  • Ví dụ vị trí trên cùng bên trái (Top-Left)
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
  color:red;
}

Image Filters.

  • Thuộc tính filter thêm hiệu ứng hình ảnh (như mờ và bão hòa) vào một phần tử.
  • Lưu ý: Thuộc tính bộ lọc không được hỗ trợ trong Internet Explorer hoặc Edge 12.

Ví dụ:

.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}

Image Hover Overlay.

  • Ví dụ làm mờ văn bản

Code:

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

Flip an Image.

Cú pháp:

img:hover {
  transform: scaleX(-1);
}

Phương thức hình ảnh (Nâng cao).

  • Đây là một ví dụ để chứng minh cách CSS và JavaScript có thể hoạt động cùng nhau.
  • Đầu tiên, sử dụng CSS để tạo một cửa sổ phương thức (hộp thoại) và ẩn nó theo mặc định.
  • Sau đó, sử dụng JavaScript để hiển thị cửa sổ phương thức và hiển thị hình ảnh bên trong phương thức, khi người dùng nhấp vào hình ảnh.

Cú pháp:

<script>
// Tạo modal
var modal = document.getElementById('myModal');

// Lấy hình ảnh và chèn vào bên trong
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Tạo thẻ span để đóng modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
</script>


BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây