Myšlenkou je představit si tři vrstvy naskládané na sebe, kde se horní vrstva používá k vyříznutí tvaru ve druhé vrstvě, aby se odhalila třetí vrstva.
Pokud byl text v horní vrstvě výše uvedeného diagramu tvar, který vyřezáváme z druhé vrstvy, pak následující obrázek ilustruje koncept vyřazovacího textu.
Úryvek SVG
Zde je úryvek, který nastavuje spodní vrstvu ( .knockout), kterou odhalí vyřazovací text, střední vrstvu ( .knockout-text-bg), ze které vyřezáváme, a horní vrstvu ( .knockout-text), která obsahuje text SVG, který bude fungovat jako maska, kterou chcete vyjmout z druhé vrstvy.
Knock Out Text Tyto souřadnice jsou zcela libovolně v tomto příkladu a může být upravena tak, aby vyhovoval skutečné velikosti a umístění textu jsou přidány.
Všimněte si, že filldruhá vrstva je černá a fillhorní vrstva bílá. Tak fungují masky: bílá je dokonalým kontrastem k černé a skryje černé části. Mohli bychom udělat vrchní vrstvu úplně jinou barvou a ta by úplně neskrývala černou, ale umožnila by jí část proklouznout.
Styl CSS
Zbytek tvoří styl CSS. Například můžeme přidat gradient pozadí do spodní vrstvy a upravit velikost písma, abychom získali větší dramatický efekt.
.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; )Přečtěte si text SVG Knock Out od Geoffa Grahama (@geoffgraham) na CodePen.