CSS masking – Cách sử dụng masking trong CSS

CSS Masking là một trong những tính năng quan trọng của CSS, được sử dụng để che giấu các phần tử trên website hoặc áp dụng hiệu ứng lớp trang trang trí. Trong bài viết này, chúng ta sẽ tìm hiểu về CSS Masking là gì, cách sử dụng và những ưu điểm cũng như nhược điểm của nó.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Masking Là Gì ?

CSS Masking là công nghệ cho phép hiển thị hoặc ẩn các phần tử trên website thông qua việc áp dụng mặt nạ (mask) trên hình ảnh. Điều này có nghĩa là bạn có thể giấu đi một phần của một hình ảnh hoặc văn bản.

Trong CSS, Masking được định nghĩa bởi thuộc tính “mask-image” và bạn cần cung cấp một hình ảnh để tạo ra mask. Bạn có thể tạo mask từ các hình ảnh PNG, JPEG hoặc SVG.

Tổng Quan CSS Masking

Trong phần này, chúng ta sẽ tìm hiểu chi tiết hơn về CSS Masking.

Các thuộc tính CSS masking

Ngoài thuộc tính mask, CSS masking cũng cung cấp một số thuộc tính bổ sung để kiểm soát cách thức hoạt động của mặt nạ. Các thuộc tính này bao gồm:

• mask-image: Xác định hình ảnh hoặc đường path được sử dụng làm mặt nạ.
• mask-mode: Xác định cách thức kết hợp hình ảnh mặt nạ với phần tử được che. Các giá trị có thể là:
  • none: Không sử dụng mặt nạ.
  • alpha: Hình ảnh mặt nạ được sử dụng để tạo ra hiệu ứng đổ bóng.
  • luminance: Hình ảnh mặt nạ được sử dụng để tạo ra hiệu ứng hình dạng trong suốt.
• mask-repeat: Xác định cách thức lặp lại hình ảnh mặt nạ. Các giá trị có thể là:
  • repeat: Hình ảnh mặt nạ được lặp lại theo cả chiều ngang và chiều dọc.
  • repeat-x: Hình ảnh mặt nạ chỉ được lặp lại theo chiều ngang.
  • repeat-y: Hình ảnh mặt nạ chỉ được lặp lại theo chiều dọc.
  • no-repeat: Hình ảnh mặt nạ không được lặp lại.
• mask-position: Xác định vị trí của hình ảnh mặt nạ. Các giá trị có thể là:
  • center: Hình ảnh mặt nạ được đặt ở trung tâm của phần tử được che.
  • top-left: Hình ảnh mặt nạ được đặt ở góc trên bên trái của phần tử được che.
  • top-center: Hình ảnh mặt nạ được đặt ở trung tâm của phần tử được che, ngay phía trên.
  • top-right: Hình ảnh mặt nạ được đặt ở góc trên bên phải của phần tử được che.
  • left-center: Hình ảnh mặt nạ được đặt ở trung tâm của phần tử được che, ngay bên trái.
  • center-center: Hình ảnh mặt nạ được đặt ở trung tâm của phần tử được che.
  • right-center: Hình ảnh mặt nạ được đặt ở trung tâm của phần tử được che, ngay bên phải.
  • bottom-left: Hình ảnh mặt nạ được đặt ở góc dưới bên trái của phần tử được che.
  • bottom-center: Hình ảnh mặt nạ được đặt ở trung tâm của phần tử được che, ngay phía dưới.
  • bottom-right: Hình ảnh mặt nạ được đặt ở góc dưới bên phải của phần tử được che.
• mask-clip: Xác định phần của hình ảnh mặt nạ được sử dụng để che phần tử được che. Các giá trị có thể là:
  • auto: Hình ảnh mặt nạ được sử dụng theo kích thước của nó.
  • `rect(x, y, width, height):** Hình ảnh mặt nạ được sử dụng theo kích thước và vị trí được chỉ định.
  • `polygon(x1, y1, x2, y2, …, xn, yn):** Hình ảnh mặt nạ được sử dụng theo hình dạng đa giác được chỉ định.
• mask-border: Xác định màu sắc và độ dày của đường viền được vẽ xung quanh phần tử được che. Các giá trị có thể là:
  • none: Không vẽ đường viền.
  • color: Vẽ đường viền với màu được chỉ định.
  • color 1px solid: Vẽ đường viền với màu được chỉ định và độ dày 1px.

Lưu ý

CSS masking có thể ảnh hưởng đến hiệu suất của trang web của bạn. Nếu bạn sử dụng mặt nạ trên nhiều phần tử, hãy lưu ý sử dụng các hình ảnh mặt nạ nhỏ và đơn giản để giảm thiểu tác động đến hiệu suất.

Clipping vs Masking

Trước khi đi vào chi tiết về CSS Masking, chúng ta cần hiểu sự khác biệt giữa Clipping và Masking.

Clipping dùng để cắt bớt phần tử trên website. Điều này có nghĩa là bạn có thể cắt bỏ một số phần của một hình ảnh. Kết quả là những phần bị cắt bỏ sẽ không được hiển thị trên website.

Masking cho phép bạn giấu đi một phần của một hình ảnh. Kết quả là các phần được giấu sẽ không được hiển thị trên website.

Cách Sử Dụng CSS Masking

Để sử dụng CSS Masking, bạn sử dụng thuộc tính “mask-image”. Bạn có thể sử dụng một hình ảnh làm mask hoặc tạo một mask từ các hình ảnh khác nhau.

Ví dụ:

<img src="image.jpg" style="mask-image:url(mask.png)">

Ở đây, chúng ta đang áp dụng một mask bằng cách sử dụng một hình ảnh PNG với tên “mask.png” trên một hình ảnh JPEG với tên “image.jpg”.

Tạo Mask Từ Hình Ảnh Khác Nhau

Bạn cũng có thể tạo ra mask từ các hình ảnh khác nhau. Ví dụ sau đây minh họa cho việc này:

<img src="image.jpg" style="mask-image:url(mask1.png),url(mask2.png)">

Ở đây, chúng ta sử dụng hai hình ảnh có tên lần lượt là “mask1.png” và “mask2.png” để tạo mask.

Tạo Mask Từ CSS Gradients

Ngoài ra, bạn cũng có thể tạo mask từ CSS gradients. Ví dụ sau đây minh họa chi tiết cách sử dụng CSS Gradients để tạo mask:

<img src="image.jpg" style="mask-image:linear-gradient(to bottom, transparent, black);">

Ở đây, chúng ta sử dụng một CSS Gradient để tạo mask.

Hướng Dẫn CSS Masking

Trong phần này, chúng ta sẽ hướng dẫn chi tiết cách sử dụng CSS Masking.

Các Thuộc Tính CSS Masking

Để tùy chỉnh CSS Masking, chúng ta có thể sử dụng các thuộc tính sau:

1. mask-image: Đây là thuộc tính để cung cấp hình ảnh cho mask.
2. mask-size: Điều chỉnh kích thước của mask bằng phần trăm hoặc đơn vị pixel.
3. mask-repeat: Xác định cách lặp lại mask.
4. mask-position: Điều chỉnh vị trí của mask.
5. mask-origin: Xác định điểm gốc của mask.
6. mask-clip: Xác định vùng được mask áp dụng lên.
7. mask-composite: Xác định cách sự kết hợp giữa hình ảnh gốc và mask.

Các Ví Dụ Sử Dụng CSS Masking

Ngoài ra, chúng ta cũng có thể áp dụng CSS Masking vào các thành phần khác nhau trên website như hình ảnh, văn bản hay các đối tượng khác.

Ví dụ 1: Áp dụng mask lên hình ảnh

<div class="img-container">
    <img src="image.jpg" alt="">
</div>

<style>
.img-container {
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
}
</style>

Ví dụ 2: Mask cho văn bản

<div class="text-mask">
    <h1>Lorem Ipsum dolor sit amet</h1>
</div>

<style>
.text-mask {
    -webkit-mask-image: linear-gradient(to left, transparent, black);
    mask-image: linear-gradient(to left, transparent, black);
}
</style>

Ưu và Nhược Điểm Của CSS Masking

Ưu Điểm

1. Cho phép tạo hiệu ứng đẹp mắt trên website.
2. Giúp giảm thiểu kích thước file hình ảnh.
3. Tăng tốc độ tải trang.

Nhược Điểm

1. Không được hỗ trợ trên một số trình duyệt cũ.
2. Khó để tùy chỉnh nếu bạn không có kinh nghiệm về CSS.

Lời Khuyên Khi Sử Dụng CSS Masking

Để sử dụng CSS Masking hiệu quả, bạn cần:

1. Kiểm tra xem trình duyệt của bạn có hỗ trợ tính năng này hay không.
2. Học cách tùy chỉnh CSS Masking để tạo ra hiệu ứng đẹp mắt trên website của bạn.
3. Luôn tìm kiếm các tài liệu và hướng dẫn mới nhất để cập nhật về CSS Masking.

Cuối cùng, việc sử dụng CSS Masking là một trong những cách hiệu quả để tạo ra hiệu ứng đẹp mắt trên website của bạn. Nếu bạn muốn tìm hiểu thêm về CSS Masking, hãy tham khảo các tài liệu và hướng dẫn mới nhất để cập nhật kiến thức của mình.