CSS clip-path – Sử dụng thuộc tính clip-path trong CSS

CSS clip-path là một thuộc tính CSS được sử dụng để tạo ra một vùng cắt và chỉ định khu vực của phần tử mà nên hiển thị. Khu vực bên trong vùng cắt sẽ được hiển thị, trong khi khu vực bên ngoài sẽ bị ẩn đi. Bất cứ thứ gì bên ngoài vùng cắt đều sẽ bị cắt bỏ bởi trình duyệt, bao gồm cả viền, bóng chữ và nhiều hơn nữa. Nó cho phép chúng ta xác định một khu vực cụ thể của phần tử để hiển thị, thay vì hiển thị toàn bộ khu vực. Nó giúp cho việc cắt các hình dạng cơ bản dễ dàng hơn bằng cách sử dụng các từ khóa ellipse, circle, polygon hoặc inset.

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 clip-path là gì ?

Như đã đề cập ở trên, CSS clip-path là một thuộc tính CSS được sử dụng để tạo ra một vùng cắt và chỉ định khu vực của phần tử mà nên hiển thị. Điều này làm cho việc cắt các hình dạng cơ bản dễ dàng hơn bằng cách sử dụng các từ khóa ellipse, circle, polygon hoặc inset. Nó cũng cho phép chúng ta áp dụng các hiệu ứng hoạt hình và chuyển tiếp để tạo ra các hiệu ứng thú vị.

CSS clip-path có thể được sử dụng bởi các nhà thiết kế web và nhà phát triển để tạo ra các trang web độc đáo và thu hút sự chú ý của khách hàng. Nó rất hữu ích để tạo ra các hình dạng đa dạng và thú vị cho các phần tử trên trang web, từ hình dạng của các nút bấm đến hình dạng của các hình ảnh và video.

Hướng dẫn CSS clip-path

Thuộc tính CSS clip-path có bốn giá trị: clip-source, basic-shape, geometry-box và none. Hãy cùng tìm hiểu về các giá trị này.

clip-source

Đây là một url trỏ đến một phần tử SVG <clippath>.

basic-shape

Nó cắt phần tử thành một hình dạng cơ bản. Có bốn hình dạng cơ bản: hình tròn, hình bầu dục, đa giác và inset.

geometry-box

<geometry-box> xác định hộp tham chiếu cho hình dạng cơ bản. Nếu nó được xác định với kết hợp của <basic-shape>, thì nó sẽ hoạt động như hộp tham chiếu cho việc cắt bởi <basic-shape>. Nó có thể có các giá trị sau:

• margin-box: Nó là hộp tham chiếu bên ngoài, kích thước bao gồm cả bán kính của hình dạng.
• border-box: Nó là hộp tham chiếu bên ngoài, được định nghĩa bởi lề ngoài của biên.
• padding-box: Nó là hộp tham chiếu bên trong, chỉ định hình dạng được bao quanh bởi lề trong.
• content-box: Nó là h ình chứa nội dung của phần tử.
• fill-box: Hộp giới hạn đối tượng có thể được sử dụng làm hộp tham chiếu.
• stroke-box: Hộp giới hạn gạch nét có thể được sử dụng làm hộp tham chiếu.
• view-box: Nó sử dụng viewport SVG gần nhất làm hộp tham chiếu.

Xác định hình dạng cơ bản bằng CSS clip-path

Như đã đề cập ở trên, có bốn hình dạng cơ bản. Hãy tìm hiểu về chúng với ví dụ cụ thể.

polygon

Đây là một trong những hình dạng có sẵn. Nó cho phép chúng ta xác định bất kỳ số điểm nào. Các điểm được đưa ra theo cặp tọa độ X và Y của bất kỳ đơn vị nào (như phần trăm hoặc pixel). Chúng ta có thể hiểu hình dạng cơ bản này bằng cách sử dụng ví dụ sau.

Trong ví dụ sau, chúng ta đã xác định hai hình dạng đa giác: hình kim cương và hình ngôi sao.

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

circle

Cú pháp mặc định để xác định hình tròn là circle (bán kính tại posX posY). Vị trí là tùy chọn và giá trị mặc định của nó là 50% 50%.

clip-path: circle(50%);

ellipse

Cú pháp để xác định hình bầu dục là: ellipse (bán kínhX bán kínhY tại posX posY). Giống như hình tròn, vị trí cũng là tùy chọn và mặc định là 50% 50%.

clip-path: ellipse(50% 30% at 50% 50%);

inset

Sử dụng inset, chúng ta có thể xác định một hình chữ nhật bên trong và bất cứ điều gì bên ngoài sẽ bị loại bỏ. Nó làm cho việc cắt ảnh hoặc phần tử trở nên dễ dàng hơn.

clip-path: inset(10% 20% 30% 40%);

Adding animation

Chúng ta cũng có thể áp dụng hiệu ứng hoạt hình cho thuộc tính này. Hiệu ứng hoạt hình và chuyển tiếp sẽ tạo ra các hiệu ứng thú vị với thuộc tính CSS clip-path. Hãy xem ví dụ sau.

@keyframes clip {
  to { clip-path: circle(50%); }
}

.element {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: clip 2s ease infinite alternate;
}

Ưu và Nhược điểm CSS clip-path là gì

Ưu điểm

• Giúp cho việc cắt hình dạng cơ bản dễ dàng hơn.
• Cho phép áp dụng các hiệu ứng hoạt hình và chuyển tiếp cho phần tử bằng cách sử dụng CSS.
• Giúp tạo ra các hiệu ứng động cho phần tử.
• Tích hợp với các hiệu ứng khác của CSS như transform, transition để tạo ra các hiệu ứng thú vị.

Nhược điểm

• Không được hỗ trợ hoàn toàn trên tất cả các trình duyệt.
• Có thể gây ra hiệu ứng lag khi áp dụng cho phần tử quá lớn hay phức tạp.

Lời khuyên CSS clip-path

Dưới đây là một số lời khuyên khi sử dụng CSS clip-path:

• Sử dụng các hình dạng cơ bản để cắt phần tử. Các hình dạng này được hỗ trợ tốt trên các trình duyệt và giúp việc cắt dễ dàng hơn.
• Kết hợp CSS clip-path với các thuộc tính khác của CSS như transform, transition để tạo ra các hiệu ứng động thú vị.
• Kiểm tra kỹ trước khi sử dụng trên các trình duyệt khác nhau để đảm bảo tính tương thích và đồng nhất của phần tử.