Η ιδέα εδώ είναι να φανταστούμε τρία στρώματα που στοιβάζονται το ένα πάνω στο άλλο, όπου το πάνω στρώμα χρησιμοποιείται για να κόψει ένα σχήμα στο δεύτερο στρώμα για να αποκαλύψει το τρίτο στρώμα.
Εάν το κείμενο στο πάνω επίπεδο του παραπάνω διαγράμματος ήταν το σχήμα που κόβουμε από το δεύτερο επίπεδο, τότε η ακόλουθη εικόνα απεικονίζει την έννοια του κειμένου νοκ-άουτ.
Απόσπασμα SVG
Εδώ είναι ένα απόσπασμα που ρυθμίζει το κάτω στρώμα ( .knockout) που θα αποκαλύψει το νοκ άουτ κείμενο, το μεσαίο στρώμα ( .knockout-text-bg) από το οποίο κόβουμε και το ανώτερο στρώμα ( .knockout-text) που περιέχει το κείμενο SVG που θα λειτουργήσει ως μάσκα για κοπή έξω από το δεύτερο στρώμα.
Knock Out Text Οι συντεταγμένες είναι εντελώς αυθαίρετες σε αυτό το παράδειγμα και μπορούν να προσαρμοστούν ώστε να ταιριάζουν στο πραγματικό μέγεθος και την τοποθέτηση του κειμένου που προστίθεται.
Σημειώστε ότι το fillδεύτερο στρώμα είναι μαύρο και fillτο πάνω στρώμα είναι λευκό. Έτσι λειτουργούν οι μάσκες: το λευκό είναι η τέλεια αντίθεση με το μαύρο και θα κρύψει τα μαύρα μέρη. Θα μπορούσαμε να κάνουμε το ανώτερο στρώμα ένα εντελώς διαφορετικό χρώμα και δεν θα κρύψει εντελώς το μαύρο, αλλά θα αφήσουμε μερικά από αυτά να περάσουν.
Στυλ CSS
Τα υπόλοιπα είναι στυλ CSS. Για παράδειγμα, μπορούμε να προσθέσουμε μια κλίση φόντου στο κάτω στρώμα και να ανεβάσουμε το μέγεθος της γραμματοσειράς για να έχουμε περισσότερο δραματικό εφέ.
.knockout ( /* Ensure the bottom layer is full screen */ height: 100vh; width: 100%; /* Add a colorful texture and cutom font-styling */ background-image: linear-gradient(to left, #ff4e50 , #f9d423); text-transform: uppercase; ) /* Knockout text font sizing for each line */ text:nth-child(2) ( font-size: 5em; ) text:nth-child(3) ( font-size: 5.1em; ) text:nth-child(4) ( font-size: 15em; )Δείτε το κείμενο Pen SVG Knock Out του Geoff Graham (@geoffgraham) στο CodePen.