Ideanya di sini adalah untuk membayangkan tiga lapisan bertumpuk di atas satu sama lain di mana lapisan atas digunakan untuk memotong bentuk di lapisan kedua untuk menampakkan lapisan ketiga.
Sekiranya teks pada lapisan atas rajah di atas adalah bentuk yang kita potong dari lapisan kedua, maka gambar berikut menggambarkan konsep teks kalah mati.
Coretan SVG
Berikut adalah coretan yang mengatur lapisan bawah ( .knockout) yang akan diungkapkan oleh teks tiruan, lapisan tengah ( .knockout-text-bg) yang kita potong, dan lapisan atas ( .knockout-text) yang mengandungi teks SVG yang akan bertindak sebagai topeng untuk dipotong keluar lapisan kedua.
Knock Out Text The koordinat adalah betul-betul sewenang-wenangnya dalam contoh ini dan yang boleh dilaraskan untuk disesuaikan dengan saiz sebenar dan penempatan teks yang ditambah.
Perhatikan bahawa filllapisan kedua berwarna hitam dan filllapisan atas berwarna putih. Begitulah cara kerja topeng: putih adalah kontras sempurna dengan warna hitam dan akan menyembunyikan bahagian hitam. Kita boleh menjadikan lapisan atas warna yang sama sekali berbeza dan tidak akan menyembunyikan warna hitam sepenuhnya, tetapi membiarkan sebahagiannya meleret.
Gaya CSS
Selebihnya adalah gaya CSS. Sebagai contoh, kita dapat menambahkan kecerunan latar ke lapisan bawah dan menaikkan saiz fon untuk mendapatkan lebih banyak kesan dramatik.
.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 Knock Out Pen SVG oleh Geoff Graham (@geoffgraham) di CodePen.