Idenya di sini adalah membayangkan tiga lapisan ditumpuk di atas satu sama lain di mana lapisan atas digunakan untuk memotong bentuk di lapisan kedua untuk menampilkan lapisan ketiga.
Jika teks pada lapisan atas diagram di atas adalah bentuk yang kita potong dari lapisan kedua, maka gambar berikut mengilustrasikan konsep teks knockout.
Cuplikan SVG
Berikut ini cuplikan yang menyiapkan lapisan bawah ( .knockout) yang akan ditampilkan oleh teks knockout, lapisan tengah ( .knockout-text-bg) yang kita potong, dan lapisan atas ( .knockout-text) yang berisi teks SVG yang akan bertindak sebagai topeng untuk dipotong keluar dari lapisan kedua.
Knock Out Text The koordinat benar-benar sewenang-wenang dalam contoh ini dan dapat disesuaikan agar sesuai dengan ukuran sebenarnya dan penempatan teks yang ditambahkan.
Perhatikan bahwa filllapisan kedua berwarna hitam dan filllapisan atas berwarna putih. Begitulah cara kerja topeng: putih adalah kontras sempurna dengan hitam dan akan menyembunyikan bagian hitam. Kita bisa membuat lapisan atas menjadi warna yang sama sekali berbeda dan itu tidak akan sepenuhnya menyembunyikan hitam, tetapi membiarkan sebagian darinya lolos.
Styling CSS
Sisanya adalah gaya CSS. Misalnya, kita dapat menambahkan gradien latar belakang ke lapisan bawah dan mengatur gaya ukuran font untuk mendapatkan lebih banyak efek dramatis.
.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; )Lihat Teks Pen SVG Knock Out oleh Geoff Graham (@geoffgraham) di CodePen.