Buradaki fikir, üst katmanın üçüncü katmanı ortaya çıkarmak için ikinci katmandaki bir şekli kesmek için kullanıldığı, birbiri üzerine istiflenmiş üç katmanı hayal etmektir.
Yukarıdaki diyagramın üst katmanındaki metin, ikinci katmandan çıkardığımız şekilse, aşağıdaki görüntü altını gizleme metni kavramını gösterir.
SVG Snippet
Aşağıda, altını .knockoutgizleme metninin ortaya çıkaracağı alt katmanı ( ) .knockout-text-bg, kesmekte olduğumuz orta katmanı ( ) ve .knockout-textkesmek için maske görevi görecek SVG metnini içeren üst katmanı ( ) ayarlayan bir pasaj ikinci katmandan dışarı.
Knock Out Text Koordinatlar bu örnekte tamamen keyfi ve metin eklenen gerçek boyutunu ve yerleşimini uyacak şekilde ayarlanabilir.
Not bu fillikinci tabakanın siyah ve fillüst tabakanın beyazdır. Maskeler böyle çalışır: Beyaz, siyahla mükemmel bir kontrast oluşturur ve siyah kısımları gizler. Üst katmanı tamamen farklı bir renk haline getirebiliriz ve bu siyahı tamamen gizlemeyebilir, ancak bir kısmının kaymasına izin verir.
CSS Stil
Gerisi CSS stilidir. Örneğin, alt katmana bir arka plan gradyanı ekleyebilir ve daha dramatik bir etki elde etmek için yazı tipi boyutunu biçimlendirebiliriz.
.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; )CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Pen SVG Knock Out Text'e bakın.