Khái niệm về clipping và mask khá đơn giản. Ẩn các phần nhất định của các phần tử và hiển thị những phần khác. Sự khác biệt thực tế giữa chúng cũng khá đơn giản. Clipping luôn là một đường dẫn vector, trong đó bên trong đường dẫn có thể nhìn thấy và bên ngoài đường dẫn thì không. Trong đó mặt nạ là một hình ảnh, được coi như một hình ảnh thang độ xám trong đó các phần màu đen che hình ảnh thành trong suốt và các phần màu trắng cho hình ảnh đi qua.
Tuy nhiên, việc thực hiện cắt và tạo mặt nạ không đặc biệt dễ dàng, vì trình duyệt hỗ trợ cho nó (và tất cả các phần bổ sung nhỏ) khá khác nhau. Chúng tôi cố gắng và trải qua tất cả trong video màn hình này, các cuộc đấu tranh và tất cả.
Cú pháp cho tất cả các khả năng là:
.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* Masking */ /* mask-image, mask-position, mask-repeat, mask-clip, mask-size… */ mask: url(mask.svg); mask-type: luminance || alpha; -webkit-mask-box-image: url(stampTiles.svg) 30 repeat; mask-border: url(stampTiles.svg) 30 repeat; )Một số nội dung demo mà chúng tôi đã chơi với video này ở đây và ở đây.
Đây là một loạt các tài nguyên về nó:
- clip-path tại đây trên CSS-Tricks Almanac
- Cắt và tạo mặt nạ trong CSS
- clip-path trên WPD
- đường dẫn clip trên MDN
- Cắt và tạo mặt nạ trên MDN
- Thuộc tính CSS Clip (không dùng nữa) (Trang web ấn tượng)
- Thông số kỹ thuật về CSS Masking
- CSS Masking của Dirk Schulze
- Cắt trong CSS và SVG - Thuộc tính và
yếu tố đường dẫn clip của Sara Soueidan - Bút được gắn thẻ clip-path trên CodePen
- Bản trình diễn và trình duyệt hỗ trợ trình duyệt Pen của Yoksel
- SVG Masks của Jakob Jenkov
- Nghiên cứu của Alan Greenblatt về các mức hỗ trợ của trình duyệt cho các tính năng cắt và tạo mặt nạ