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 được mọi thứ trong thiết kế trông giống như một chiếc hộp. Bạn có thể tạo đường dẫn đoạn bằng cách sử dụng nhiều hình dạng cơ bản hoặc tệp SVG (Đồ hoạ vectơ có thể mở rộng). 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 cho mọi thứ trông giống như một chiếc hộp. Bạn có thể sử dụng thuộc tính clip-path của CSS để cắt các phần của hình ảnh hoặc phần tử khác, để tạo các hiệu ứng thú vị.

Trong ví dụ trên, hình ảnh bong bóng trò chuyện có dạng hình vuông (nguồn). Sử dụng clip-path và giá trị hình dạng cơ bản của circle() bầu trời khác xung quanh bong bóng bị cắt bớt để lại một 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. 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 những 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 vài cách để tạo clip-path. Trong bài đăng này, chúng ta sẽ tìm hiểu về chúng.

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

Đối với các trình duyệt cũ, phương án dự phòng có thể 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 bị cắt. Nếu đây là vấn đề, bạn có thể kiểm tra clip-path trong một 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 Quy cách của CSS Shapes. Điều này có nghĩa là bạn có thể cắt một vùng, đồng thời sử dụng cùng một giá trị cho shape-outside để khiến 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() lồng ghép vùng bị cắt từ cạnh của phần tử, và có thể chuyển các giá trị cho cạnh trên, phải, cạnh dưới và cạnh 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ụ này, tôi có hai hộp đều có lớp là .box. Hộp đầu tiên không có đoạn video nào, hộp thứ hai được 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ị cắt bởi hộp lề 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, nên 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 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ố lượng điểm tuỳ ý, 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ể làm được, 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 trong các giá trị của hộp

Cũng được xác định trong Hình dạng trong CSS là các hình dạng trong giá trị hộp. Các chi tiết 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ề với các giá trị từ khóa là content-box, border-box, padding-box và margin-box.

Các giá trị này có thể được sử dụng riêng lẻ hoặc cùng với 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ụ: 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 kết nối sẽ sử dụng content-box làm hộp tham chiếu thay vì margin-box (là 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

Để kiểm soát vùng bị cắt nhiều hơn mức có thể với các hình dạng cơ bản, sử dụng phần tử SVG clipPath. Sau đó, hãy tham chiếu đến mã nhận dạng đó bằng cách 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 này, tôi sẽ tạo ảnh độ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 trên Burst.