Vor ein paar Tagen habe ich bereits euch gezeigt wie ihr einen Titel mit einer Farbverlausfarbe designen könnt. Kurz danach ist dann die Frage aufgetaucht ob ich auch zeigen könne, wie man so einen Farbverlauf machen könne aber nur in der Kontur einer Schrift.
Natürlich kann ich euch das hier auch zeigen. Damit das ganze sauber funktioniert braucht ihr einfach eine Schrift die genügend Dick ist.
Video
HTML
1 | <h1>Eric-Oliver Mächler</h1> |
CSS
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 | body {
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
h1 {
font-size: 11vmin;
color: #111;
letter-spacing: 0.2em;
background: linear-gradient(
to right,
#f60000,
#ff8c00,
#ffee00,
#4de94c,
#3783ff,
#4815aa
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: 0.1em transparent; /* 0.1em = dicke der Kontur */
} |
0 Kommentare