Wie erstelle ich einen Titel der einen Kontur-Farbverlauf hat? (CSS & HTML Anleitung)

von | Jul 26, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML

Inhaltsverzeichnis

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

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Kurse / Webinare

Meine nächste Webinare / Kurse