Η έννοια της αποκοπής και της κάλυψης είναι αρκετά απλή. Απόκρυψη συγκεκριμένων τμημάτων στοιχείων και εμφάνιση σε άλλα. Η πραγματική διαφορά μεταξύ τους είναι επίσης πολύ απλή. Το απόκομμα είναι πάντα μια διανυσματική διαδρομή, όπου το μονοπάτι είναι ορατό και έξω από το μονοπάτι δεν είναι. Όπου μια μάσκα είναι μια εικόνα, αντιμετωπίζεται ως μια εικόνα σε κλίμακα του γκρι όπου τα μαύρα μέρη καλύπτουν την εικόνα με διαφάνεια και τα λευκά μέρη αφήνουν την εικόνα να περάσει.
Η εφαρμογή αποκοπής και κάλυψης δεν είναι ιδιαίτερα εύκολη, καθώς η υποστήριξη του προγράμματος περιήγησης για αυτό (και όλα τα μικρά εισερχόμενα) διαφέρει αρκετά. Προσπαθούμε να τα ξεπεράσουμε σε αυτό το σενάριο, τους αγώνες και όλα.
Η σύνταξη για όλες τις δυνατότητες είναι:
.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; )Μερικά από τα demo πράγματα που παίξαμε με αυτό το βίντεο είναι εδώ και εδώ.
Ακολουθεί μια πληθώρα πόρων σε αυτό:
- clip-path εδώ στο CSS-Tricks Almanac
- Αποκοπή και απόκρυψη σε CSS
- κλιπ-διαδρομή στο WPD
- κλιπ-διαδρομή στο MDN
- Αποκοπή και απόκρυψη στο MDN
- Η (καταργημένη) ιδιότητα κλιπ CSS (Εντυπωσιακοί Ιστότοποι)
- Προδιαγραφή στο CSS Masking
- CSS Masking από τον Dirk Schulze
- Αποκοπή σε CSS και SVG - Η ιδιότητα και το
στοιχείο κλιπ διαδρομής από τη Sara Soueidan - Στυλό με ετικέτα κλιπ-διαδρομή στο CodePen
- Επίδειξη και υποστήριξη προγράμματος περιήγησης Pen Pen από Yoksel
- Μάσκες SVG από τον Jakob Jenkov
- Η έρευνα του Alan Greenblatt σχετικά με τα επίπεδα υποστήριξης του προγράμματος περιήγησης για δυνατότητες αποκοπής και απόκρυψης