Tạo các hình ảnh thú vị với thuộc tính clip-path của CSS

Việc sử dụng tính năng cắt xén trong CSS có thể giúp chúng ta tránh xa mọi thứ trong thiết kế của mình trông giống như một chiếc hộp. Bằng cách sử dụng nhiều hình dạng cơ bản hoặc SVG, bạn có thể tạo một đường cắt. Sau đó, cắt bỏ các phần của phần tử mà bạn không muốn hiển thị.

Rachel Andrew

Các phần tử trên trang web đều được xác định bên trong một hộp hình chữ nhật. Tuy nhiên, điều đó không có nghĩa là chúng ta phải làm mọi thứ trông giống như một hộp. Bạn có thể sử dụng thuộc tính clip-path CSS để cắt bỏ các phần của hình ảnh hoặc phần tử khác để tạo hiệu ứng thú vị.

Trong ví dụ trên, hình ảnh hộp chú giải là hình vuông (nguồn). Khi sử dụng clip-path và giá trị hình dạng cơ bản của circle(), bầu trời bổ sung xung quanh bong bóng trò chuyện sẽ bị cắt bỏ, để lại hình ảnh hình tròn trên trang.

Vì hình ảnh là một đường liên kết nên bạn có thể thấy một số thông tin khác về thuộc tính clip-path. Bạn chỉ có thể nhấp vào vùng hiển thị của hình ảnh vì các sự kiện không kích hoạt trên các phần bị ẩn của hình ảnh.

Tính năng cắt có thể được áp dụng cho mọi phần tử HTML, không chỉ hình ảnh. Có một số cách để tạo clip-path, trong bài đăng này, chúng ta sẽ xem xét các cách đó.

Khả năng tương thích với trình duyệt

Đối với các trình duyệt cũ, bạn có thể sử dụng phương án dự phòng là cho phép trình duyệt bỏ qua thuộc tính clip-path và hiển thị hình ảnh chưa cắt. Nếu đây là vấn đề, bạn có thể kiểm tra clip-path trong truy vấn tính năng và cung cấp một bố cục thay thế cho các trình duyệt không hỗ trợ.

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

Hình dạng cơ bản

Thuộc tính clip-path có thể nhận một số giá trị. Giá trị được sử dụng trong ví dụ ban đầu là circle(). Đây là một trong các giá trị hình dạng cơ bản được xác định trong thông số kỹ thuật Hình dạng CSS. Điều này có nghĩa là bạn có thể cắt một vùng và cũng sử dụng cùng một giá trị cho shape-outside để văn bản bao quanh hình dạng đó.

Danh sách đầy đủ các hình dạng cơ bản là:

• inset()
• circle()
• ellipse()
• polygon()

inset()

Giá trị inset() chèn vùng bị cắt từ cạnh của phần tử và có thể được truyền giá trị cho các cạnh trên cùng, bên phải, dưới cùng và bên trái. Bạn cũng có thể thêm border-radius để cong các góc của vùng bị cắt bằng cách dùng từ khoá round.

Trong ví dụ của mình, tôi có hai hộp đều có lớp .box. Hộp đầu tiên không bị cắt, hộp thứ hai bị cắt bằng các giá trị inset().

circle()

Như bạn đã thấy, giá trị circle() tạo ra một vùng được cắt hình tròn. Giá trị đầu tiên là độ dài hoặc phần trăm và là bán kính của hình tròn. Giá trị không bắt buộc thứ hai cho phép bạn đặt tâm của vòng tròn. Trong ví dụ bên dưới, tôi sử dụng giá trị từ khoá để đặt vòng tròn được cắt bớt ở trên cùng bên phải. Bạn cũng có thể sử dụng độ dài hoặc tỷ lệ phần trăm.

Hãy chú ý đến các cạnh phẳng!

Hãy lưu ý rằng với tất cả các giá trị này, hình dạng sẽ bị hộp lề cắt trên phần tử. Nếu bạn tạo một vòng tròn trên một hình ảnh và hình dạng đó sẽ mở rộng ra ngoài kích thước tự nhiên của hình ảnh đó, bạn sẽ có một cạnh phẳng.

ellipse()

Về cơ bản, hình elip là một hình tròn bị dẹt, vì vậy, hình elip hoạt động rất giống như circle() nhưng chấp nhận bán kính cho x và bán kính cho y, cộng với giá trị cho tâm của hình elip.

polygon()

Giá trị polygon() có thể giúp bạn tạo các hình dạng khá phức tạp, xác định số điểm cần thiết bằng cách đặt toạ độ của từng điểm.

Để giúp bạn tạo đa giác và xem những gì có thể, hãy xem Clippy, một trình tạo clip-path, sau đó sao chép và dán mã vào dự án của riêng bạn.

Hình dạng từ giá trị hộp

Ngoài ra, các hình dạng từ giá trị hộp cũng được xác định trong Hình dạng CSS. Các giá trị này liên quan đến Mô hình hộp CSS – hộp nội dung, hộp khoảng đệm, hộp đường viền và hộp lề có giá trị từ khoá là content-box, border-box, padding-box và margin-box.

Bạn có thể sử dụng riêng các giá trị này hoặc cùng với một hình dạng cơ bản để xác định hộp tham chiếu mà hình dạng đó sử dụng. Ví dụ: đoạn mã sau đây sẽ cắt hình dạng theo cạnh của nội dung.

.box {
  clip-path: content-box;
}

Trong ví dụ này, vòng tròn sẽ sử dụng content-box làm hộp tham chiếu thay vì margin-box (là giá trị mặc định).

.box {
  clip-path: circle(45%) content-box;
}

Hiện tại, trình duyệt không hỗ trợ việc sử dụng giá trị hộp cho thuộc tính clip-path. Tuy nhiên, các phương thức này được hỗ trợ cho shape-outside.

Sử dụng phần tử SVG

Để có nhiều quyền kiểm soát hơn đối với vùng được cắt so với các hình dạng cơ bản, hãy sử dụng phần tử clipPath SVG. Sau đó, tham chiếu mã nhận dạng đó, sử dụng url() làm giá trị cho clip-path.

Tạo ảnh động cho vùng bị cắt

Bạn có thể áp dụng hiệu ứng chuyển đổi và ảnh động CSS cho clip-path để tạo một số hiệu ứng thú vị. Trong ví dụ tiếp theo, tôi sẽ tạo hiệu ứng động cho một vòng tròn khi di chuột bằng cách chuyển đổi giữa hai vòng tròn có giá trị bán kính khác nhau.

Có rất nhiều cách sáng tạo để sử dụng ảnh động với tính năng cắt. Bạn có thể tham khảo một số ý tưởng để tạo ảnh động bằng đường dẫn đoạn video trong các thủ thuật CSS.

Ảnh chụp của Matthew Henry bằng tính năng Chụp liên tiếp.