Wie kann man mit CSS einen Knockout- oder Cutout-Text-Effekt erstellen
Ein Knockout-Text ist ein Text, der ausgeschnitten erscheint, so dass man den Hintergrund dahinter sehen kann. Man kann einen Knockout-Text mit mehreren Methoden erstellen. Es gibt einige moderne CSS-Eigenschaften, die jetzt verwendet werden können und den Effekt sogar noch verstärken, wie Übergänge und Animationen. Hier werden wir 5 Methoden besprechen.
1. Verwenden Sie background-clip und text-fill-color
Verwenden Sie die CSS-Eigenschaft background-clip mit dem Wert "text", um den Hintergrund im Vordergrundtext anzuzeigen. Geben Sie anschließend die Füllfarbe der Zeichen des Textes über die CSS-Eigenschaft text-fill-color an und setzen Sie den Wert "transparent", um den Hintergrund hinter dem Text anzuzeigen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
h1 {
display: inline-block;
margin: 0;
line-height: 1em;
font-weight: bold;
font-size: 200px;
text-align: center;
align-items: center;
background-image: url("/uploads/media/default/0001/02/79cd6362a06feb80e0db3f5884df2ef279310ca7.jpeg");
background-size: 650px 450px;
background-repeat: no-repeat;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>NEUES<br>JAHR</h1>
</body>
</html>Ein weiteres Beispiel, welches einige Abbildungen dieser Methode enthält.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
* {
margin: 0;
padding: 0;
}
*, :before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
min-height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
}
.wrapper {
text-align: center;
}
/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: 0.25em;
padding: 0.5em 0.75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before, .clip-text:after {
position: absolute;
content: '';
}
/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
/* Text Background */
.clip-text:after {
position: absolute;
z-index: -1;
top: 0.125em;
right: 0.125em;
bottom: 0.125em;
left: 0.125em;
background-color: #fc0;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -0.65em 0;
}
.clip-text--no-textzone:after {
content: none;
}
.clip-text-one {
background-image: url("/uploads/media/default/0001/02/8ca4045044162379597641472fa0bb5489ba418f.jpeg");
}
.clip-text-two {
background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg");
}
</style>
</head>
<body>
<div class="wrapper">
<div class="clip-text clip-text-one">SCHLIESSEN SIE SICH UNS AN!</div>
<div class="clip-text clip-text-two clip-text--no-textzone">SCHLIESSEN SIE SICH UNS AN!</div>
</div>
</body>
</html>Es ist auch möglich, die Position des Hintergrunds hinter dem Ausschnitttext festzulegen. Zu diesem Zweck wird die CSS-Eigenschaft background-attachment mit dem Wert "fixed" verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
html, body {
background: #666666;
}
p {
margin: 0;
}
#text {
background: linear-gradient(to bottom, #eee, rgba(220,110,8,0.3), #1c87c9);
background-attachment: fixed;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 150px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<p id="text">FIX</p>
<p id="text">FIX</p>
<p id="text">FIX</p>
<p id="text">FIX</p>
<p id="text">FIX</p>
<p id="text">FIX</p>
</body>
</html>2. Verwenden Sie den Mix-Blend-Modus
Vier Mischmodi der Eigenschaft mix-blend-mode erstellen Textausschnitte einfach: "multiply", "screen", "darken" und "lighten". Die Anwendung auf das obere Element eines Bildes und Textes erzeugt das Design des Knockouts.
Obwohl in den meisten Fällen in diesen Mischmodi entweder Schwarz oder Weiß verwendet wird, um den Text klar von dem Hintergrund zu unterscheiden, bevorzugen wir eine dunklere oder hellere Farbe, anstatt das Hintergrundbild leicht sichtbar zu machen, so wie hier:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.back {
background: url("/uploads/media/default/0001/02/79cd6362a06feb80e0db3f5884df2ef279310ca7.jpeg") center;
background-size: contain;
margin: auto;
width: 500px;
}
.text {
color: #fff;
border:4px solid;
background: rgb(0, 26, 0);
mix-blend-mode:multiply;
font: bolder 20vw sans-serif;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<div class="back">
<p class="text">NEUES<br>JAHR</p>
</div>
</body>
</html>Der Mischmodus "multiply" hält dunklere Farben dunkel und die helleren Farben lassen das, was dahinter steckt, durch: Ein schwarzer Teil auf der Deckschicht ist völlig undurchsichtig und Weiß ist völlig transparent.
Der Mischmodus "screen" kehrt die Rollen um: Dunkle Farben erzeugen Transluzenz, während helle Töne hell bleiben und das dahinter liegende blockieren.
Die Mischmodi "darken" und "lighten" sind dementsprechend gleichbedeutend mit "multiply" und "screen", nur dass die Details der zu sehenden rückwärtigen Bildteile übersehen werden. Die Modi wählen den dunkleren oder helleren Farbton der beiden angezeigten Ebenen, anstatt die Farbtöne zu mischen.
Hier sehen Sie ein Beispiel, wo vier Modi dargestellt sind, die Ihnen helfen, den Unterschied zwischen ihnen zu erkennen.
Beispiel
Sie können auch einen Schattenunschärfe-Effekt zu Ihrem Knockout-Text hinzufügen, indem Sie die CSS-Eigenschaft text-shadow verwenden..
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.backdrop {
background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") center;
background-size: contain;
margin: auto;
margin-top: 30px;
width: 600px;
}
.text {
font: bolder 16vw "Alfa Slab One";
text-align: center;
margin: 0;
border: 6px solid;
}
.multiply {
color: white;
mix-blend-mode: multiply;
background-color: rgba(59, 2, 6, 1);
}
.screen {
color: black;
mix-blend-mode: screen;
background-color: rgba(244, 220, 211, 1);
}
.darken {
color: white;
mix-blend-mode: darken;
background-color: rgba(59, 2, 6, 1);
}
.lighten {
color: black;
mix-blend-mode: lighten;
background-color: rgba(245, 220, 211, 1);
}
</style>
</head>
<body>
<p>Multiply</p>
<div class="backdrop">
<p class="text multiply">NATUR</p>
</div>
<p>Screen</p>
<div class="backdrop">
<p class="text screen">NATUR</p>
</div>
<p>Darken</p>
<div class="backdrop">
<p class="text darken">NATUR</p>
</div>
<p>Lighten</p>
<div class="backdrop">
<p class="text lighten">NATUR</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.backdrop {
background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") center;
background-size: contain;
margin: auto;
margin-top: 30px;
width: 600px;
}
.text {
font: bolder 16vw "Helvetica";
text-align: center;
margin: 0;
border: 6px solid;
text-shadow: 0 0 9px white;
}
.darken {
color: white;
mix-blend-mode: darken;
background-color: rgba(59, 2, 6, 1);
}
</style>
</head>
<body>
<div class="backdrop">
<p class="text darken">NATUR</p>
</div>
</body>
</html>Lassen Sie uns weiter mit der Schattenidee gehen und eine erstaunliche Animation mit dem Knockout-Text erstellen. Hier werden die Eigenschaft animation und die Regel @keyframes hinzugefügt, um den Animationseffekt zu erzeugen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.backdrop {
background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") center;
background-size: contain;
margin: auto;
margin-top: 50px;
width: 600px;
}
.text {
font: bolder 16vw "Alfa Slab One";
text-align: center;
margin: 0;
border: 6px solid;
animation: glow 3s infinite;
}
@keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
50% {
text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
-20px -20px 50px rgba(255, 255, 255, .5);
}
}
.darken {
color: white;
mix-blend-mode: darken;
background-color: rgba(59, 2, 6, 1);
}
</style>
</head>
<body>
<div class="backdrop">
<p class="text darken">NATUR</p>
</div>
</body>
</html>3. Verwenden Sie SVG
Unten ist ein Beispiel, das die untere Ebene definiert, die durch den Knockout-Text offenbart wird, die mittlere Ebene, aus der wir herausschneiden, und die obere Ebene, die den SVG-Text enthält, der sich als Maske verhält, um die zweite Ebene herauszuschneiden.
Die Koordinaten <text> in diesem Beispiel sind völlig beliebig und können an die genaue Größe und Positionierung des hinzugefügten Textes angepasst werden.
Beachten Sie, dass die zweite Schichtfüllung schwarz und die oberste Schichtfüllung weiß ist. So funktionieren Masken: Weiß steht im perfekten Kontrast zu Schwarz und verdeckt die schwarzen Teile.
Der Rest ist das Styling des CSS. Um beispielsweise einen dramatischeren Effekt zu erzielen, können wir der unteren Ebene einen Hintergrundgradienten hinzufügen und bis zur Schriftgröße stilisieren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.knockout {
background-image: linear-gradient(to left, red, blue);
font-family: 'Bowlby One SC', cursive,serif;
height: 100vh;
text-transform: uppercase;
width: 100%;
}
text:nth-child(2) {
font-size: 5em;
}
text:nth-child(3) {
font-size: 5.1em;
}
text:nth-child(4) {
font-size: 12em;
}
</style>
</head>
<body>
<div class="knockout">
<svg class="knockout-text-container" width="100%" height="100%">
<rect class="knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)"/>
<mask id="knockout-text">
<rect width="100%" height="100%" fill="#fff" x="0" y="0" />
<text x="50%" y="100" fill="#000" text-anchor="middle">Knock</text>
<text x="50%" y="175" fill="#000" text-anchor="middle">Out</text>
<text x="50%" y="365" fill="#000" text-anchor="middle">Text</text>
</mask>
</svg>
</div>
</body>
</html>Ein weiteres Beispiel mit SVG ansehen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
text-transform: uppercase;
font-weight: bold;
}
.cake {
background: url("/uploads/media/default/0001/03/97433bc96f2a9917e0ed141a28b6903d32f0211e.jpeg");
background-size: cover;
padding: 20% 0;
}
svg {
display: block;
}
</style>
</head>
<body>
<div class="cake">
<svg viewBox="0 0 200 25">
<rect fill="#000" x="0" y="0" width="200" height="100" fill-opacity=".9" mask="url(#text)"/>
<mask id="text">
<rect fill="#fff" x="0" y="0" width="200" height="100"></rect>
<text y="20" fill="#000" text-anchor="middle" x="100" font-size="25">
Buy Cakes
</text>
</mask>
</svg>
</div>
</body>
</html>