-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtexte-als-maske-fuer-hintergruende.html
141 lines (129 loc) · 6.02 KB
/
texte-als-maske-fuer-hintergruende.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Texte als Maske für Hintergründe - HTML/CSS Tutorials</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<meta name="description" content="Texte als Maske für Hintergründe" />
<link rel="stylesheet" href="styles.css" />
<style>
.text-mask-first-step {
display: inline-block;
font-family: helvetica;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
color: #fa8bff;
}
.text-mask-second-step {
display: inline-block;
font-family: helvetica;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
color: #fa8bff;
}
</style>
</head>
<body>
<div class="grid-container grid-container--article">
<main>
<article>
<h1>Texte als Maske für Hintergründe</h1>
<h4>
<i>Autor: Aykut Şensoy, Datum: <time datetime="2023-01-15">15.01.2023</time></i>
</h4>
<p>
CSS ist mittlerweile so mächtig, dass es mit einer Fülle an Features wie Filtern, Masken, Blend-Modi, Verläufen, Transitionen, Animationen,
Trasformationen, etc. eine unendliche Menge an Möglichkeiten bietet fantastische visuelle Effekte umzusetzen. Ich möchte hier eine einfache
Möglichkeit zeigen, wie man auch ohne mix-blend-mode mit ganz wenigen Schritten einen Text mit Verlaufseffekt erzeugen kann.
</p>
<h2>1. Einen HTML-Container erzeugen</h2>
<pre>
<div class="text-mask">CSS is awesome</div>
</pre
>
<p>Im ersten Schritt wird ein einfacher HTML-Container mit einem beliebigen Textinhalt erstellt.</p>
<h2>2. Grundlegende Styles definieren</h2>
<p>
Im zweiten Schritt werden die grundlegenden Deklarationen gemacht. Für diesen Effekt ist nur die Property background-image essentiell. Es kann sich
hier wie in diesem Beispiel um einen Verlauf handeln oder auch um ein Hintergrundbild. Im Grunde ist alles möglich, was hier mit CSS background
möglich ist. Die restlichen Deklarationen dienen im wesentlichen nur dafür einen großen flächigen Text über dem Hintergrund zu definieren, welches
uns im nächsten Schritt als Transparenzmaske dienen soll.
</p>
<pre>
<style>
.text-mask {
display: inline-block;
font-family: helvetica;
font-size: 64px;
text-transform: uppercase;
background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
color: #fa8bff;
}
</style>
</pre
>
<div class="text-mask-first-step">CSS is awesome</div>
<h2>3. Masken-Effekt hinzufügen</h2>
<p>
Im dritten Schritt weisen wir den eigentlichen Effekt zu. Mit "background-clip" wird der Hintergrund geclipt und mit "text-fill-color" wird die
Farbfüllung des Textes auf transparent gestellt. Et voilà! Der Hintergrund scheint durch den Text und der Rest wird abgeschnitten. Das ist möglich,
weil im Grunde Text ja nur aus Vektorinformationen besteht und somit als Maske eingesetzt werden kann.
</p>
<pre>
<style>
.text-mask {
...
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
</style>
</pre
>
<div class="text-mask-second-step">CSS is awesome</div>
<p>
Auch wenn alle modernen Browser diese Features unterstützen, muss für beide Properties zur Zeit noch der vendor-prefix -webkit- angewendet werden.
Mit der richtigen Autoprefixer Konfiguration, sollte das im Idealfall ja auch automatisch passieren. Sonst könnt ihr ja immer noch bei "caniuse.com"
den genauen Browsersupport nachschauen.
</p>
</article>
</main>
<nav>
<h1>Beiträge</h1>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="editierung-und-selektierung-von-text.html">Editierung und Selektierung von Text</a></li>
<li><a href="vertikale-und-horizontale-zentrierung.html">Vertikale und horizontale Zentrierung</a></li>
<li><a href="modale-und-nicht-modale-dialoge.html">Modale und nicht-modale Dialoge</a></li>
<li><a href="positionswechsel-von-summary-innerhalb-details.html">Positionswechsel von summary innerhalb details</a></li>
<li><a href="detaillierte-kontrolle-beim-dekorieren-von-verweisen.html">Detaillierte Kontrolle beim Dekorieren von Verweisen</a></li>
<li>
<a href="zwei-varianten-fuer-eine-table-caption.html">Zwei Varianten für eine table caption</a>
</li>
<li><a href="inline-svg-als-background-image-ueber-css-variablen.html">Inline-SVG als background-image über CSS-Variablen</a></li>
<li>
<a href="steuerung-der-spezifizitaet-bei-mehreren-attributen.html">Steuerung der Spezifizität bei mehreren Attributen am gleichen Tag</a>
</li>
<li><a href="horizontales-menue-mit-trennern.html">Horizontales Menü mit Trennern</a></li>
<li><a href="der-irrtum-mit-root-em.html">Der Irrtum mit root em</a></li>
<li><a href="texte-als-maske-fuer-hintergruende.html">Texte als Maske für Hintergründe</a></li>
<li><a href="kurzschreibweise-top-right-bottom-left.html">Kurzschreibweise für top, right, bottom, left</a></li>
</ul>
</nav>
</div>
<footer>
© 2023
<a href="mailto:[email protected]">Aykut Şensoy</a>
</footer>
</body>
</html>