Chodzi o to, aby wyobrazić sobie trzy warstwy ułożone jedna na drugiej, gdzie górna warstwa jest używana do wycięcia kształtu w drugiej warstwie, aby odsłonić trzecią warstwę.
Jeśli tekst na górnej warstwie powyższego diagramu był kształtem, który wycinamy z drugiej warstwy, to poniższy obraz ilustruje koncepcję tekstu wycinanego.
Fragment SVG
Oto fragment, który ustawia dolną warstwę ( .knockout), którą będzie widoczny tekst do .knockout-text-bgwycięcia , środkową warstwę ( ), z której .knockout-textwycinamy , oraz górną warstwę ( ), która zawiera tekst SVG, który będzie służył jako maska do wycięcia z drugiej warstwy.
Knock Out Text W tym przykładzie współrzędne są całkowicie dowolne i można je dostosować do rzeczywistego rozmiaru i położenia dodawanego tekstu.
Zwróć uwagę, że filldruga warstwa jest czarna, a fillgórna biała. Tak działają maski: biel doskonale kontrastuje z czernią i ukrywa czarne części. Moglibyśmy nadać wierzchniej warstwie zupełnie inny kolor i nie zakryłaby ona całkowicie czerni, ale pozwoliłaby jej częściowo się przedrzeć.
Styl CSS
Reszta to styl CSS. Na przykład możemy dodać gradient tła do dolnej warstwy i zmienić rozmiar czcionki, aby uzyskać bardziej dramatyczny 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; )Zobacz tekst Pen SVG Knock Out autorstwa Geoffa Grahama (@geoffgraham) na CodePen.