CSS3 ermöglicht es Ihnen, kreativ zu sein und mit Ihrem Design zu experimentieren, um schöne und einzigartige Webseiten zu erstellen. Ein Bereich des Designs, mit dem Sie mit CSS arbeiten können, ist die Typografie.

Du kannst den... benutzen Schriftfamilie und Text-Schatten Eigenschaften, um einfache, aber bemerkenswerte Effekte zu erzielen. Sie kennen vielleicht bereits grundlegende Anwendungen von Textschatten in CSS. Sie können jedoch mit diesen Eigenschaften eine Vielzahl von Stilen erstellen.

In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML und CSS verschiedene Textschatteneffekte erstellen können.

Erste Schritte mit HTML und CSS

Sie können diese Codebeispiele kopieren und einfügen, um den gewünschten Textschatteneffekt zu erhalten. Beginnen Sie mit der Erstellung eines

index.html

 Schatten #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="Stylesheet"
/>
 Schatten #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="Stylesheet"
/>
 Schatten #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="Stylesheet"
/>
 Schatten #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="Stylesheet"
/>
 Schatten #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="Stylesheet"
/>
 Schatten #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="Stylesheet"
/>
 Schatten #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="Stylesheet"
/>

style.css

Karosserie {
Texttransformation: Großbuchstaben;
Zeilenhöhe: 1;
Textausrichtung: Mitte;
Schriftgröße: 5rem;
Anzeige: Raster;
Lücke: 4rem;
}

Lassen Sie uns nun 11 Beispiele für Textschatten durchgehen, die Sie ausprobieren können.

Verwandt: So ändern Sie den Text Ihrer Website mit der CSS-Eigenschaft font-family

Mystiker

Mystic ist ein glasiger Stil, der einen coolen, übergangsähnlichen Effekt verleiht, ohne die verwandeln Eigentum. Es ist ein super einfacher, aber ästhetisch ansprechender Effekt für eine mutige und wachstumsorientierte Website.

Ausgabe

HTML

 Schatten #01 
Mystiker

CSS

Karosserie {
Hintergrundfarbe: #5e5555;
}
.mystisch {
Schriftfamilie: 'Bowlby One', kursiv;
Farbe: RGB (255, 255, 255, 0,596);
Textschatten: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Dies ist ein verspielter Texteffekt mit der Schriftart „Monoton“. Sie können mit der Text- und Schattenfarbe herumspielen, um sie an die Primärfarben Ihrer Website anzupassen.

Ausgabe

HTML

 Schatten #02 
Monoton

CSS

.monoton {
Schriftfamilie: 'Monoton', kursiv;
Schriftgröße: 15rem;
Farbe: RGB (255, 0, 0);
Opazität: 0,5;
Textschatten: 0px -78px rgb (255, 196, 0);
}

Bungee

Dies ist ein cooler Stil mit der Schriftart "Bungee Shade". In Kombination mit einem dunklen Hintergrund erzeugt es eine raue Wirkung mit einem Gefühl von Misstrauen.

Ausgabe

HTML

 Schatten #03 
Bungee

CSS

Karosserie {
Hintergrundfarbe: #222;
}
.bungee {
Schriftfamilie: 'Bungee Shade', kursiv;
Farbe: RGB (160, 12, 12);
Opazität: 0,9;
Textschatten: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktiv

Sie können diesen Effekt für Warn- oder Gefahrenzeichen verwenden. Es verwendet die Schriftart "Rampart One".

Ausgabe

HTML

 Schatten #04 
Radioaktiv

CSS

Karosserie {
Hintergrundfarbe: #27292d;
}
.radioaktiv {
Schriftfamilie: 'Rampart One', kursiv;
Farbe: RGB (97, 214, 43);
Opazität: 0,6;
Textschatten: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Dieser Lauftexteffekt verwendet die Schriftart „Faster One“, die Text-Schatten Eigentum und ein ::nachPseudoelement mit dem gleichen Inhalt wie der Text. Dadurch entsteht ein „Verdoppelungseffekt“.

Ausgabe

HTML

 Schatten #05 
Sprint

CSS

Karosserie {
Hintergrundfarbe: #27292d;
}
.sprint {
Schriftfamilie: 'Faster One', kursiv;
Schriftgröße: 10rem;
Farbe: rgba (255, 0, 242, 0,322);
Textschatten: -20px -108px 0px rgba (255, 255, 255, 0,445);
Buchstabenabstand: 1rem;
Position: relativ;
}
.sprint:: nach {
Inhalt: 'Sprint';
Position: absolut;
oben: 215px;
rechts: 300px;
}

Stachelig

Dieser schreckliche stachelige Texteffekt verwendet die Schriftart "Eater". Sie können versuchen, die zu verschieben Text-Schatten stattdessen nach rechts unten.

Ausgabe

HTML

 Schatten #06 
Stachelig

CSS

.stachelig {
Schriftfamilie: 'Eater', kursiv;
Textschatten: -18px -18px 2px #777;
}

Codystar

Der Textschatten kann als verschwommener, aber sichtbarer Umriss des Textes dienen. Dieser helle Effekt wirkt Wunder mit der Schrift „Codystar“.

Ausgabe

HTML

 Schatten #06 
Codystar

CSS

.codystar {
Schriftfamilie: 'Codystar', kursiv;
Schriftdicke: fett;
Farbe: RGB (55, 58, 255);
Textschatten: 1px 1px 10px RGB (16, 72, 255), 1px 1px 10px RGB (0, 195, 255);
}

Königreich

Mit diesem Schatteneffekt können Sie eine maßgebliche Typografie erzielen. Es verwendet die ::Vor Pseudoelement und die verwandeln Eigenschaft, den Schatten zu schrägen.

Ausgabe

HTML

 Schatten #08 
Königreich

CSS

Karosserie {
Hintergrundfarbe: #5e5555;
}
.Königreich {
Farbe weiß;
Schriftfamilie: Impact, Haettenschweiler, 'Arial Narrow Bold', serifenlos;
Schriftgröße: 10rem;
Zeilenhöhe: 1;
Textausrichtung: Mitte;
}
.Königreich--Schatten:: vor {
Farbe: #000;
Inhalt: attr(Datentext);
Rand oben: 0.7rem;
Position: absolut;
transformieren: Perspektive (205px) RotateX(38deg) scale (0,84);
z-Index: -1;
}

Kodierer

So hell und positiv Text-Schatten effect vermittelt eine selbstbewusste und motivierte Website-Persönlichkeit. Sie können es zu Ihrer Website hinzufügen, um einen einfachen Smokey-Look zu erzeugen.

Ausgabe

HTML

 Schatten #09 


Essen 

Schlaf 

Code 

Wiederholen

CSS

Karosserie {
Hintergrundfarbe: #5e5555;
}
div {
Schriftfamilie: Verdana, Geneva, Tahoma, Sans-Serif;
Polsterung: 40px;
Rand: 0px automatisch;
Schriftdicke: fett;
Zeilenhöhe: 5.8rem;
Textausrichtung: links;
Farbe: RGB (94, 94, 94);
} 
.coder-leben {
Textschatten: 5px 5px #ffff00;
Filter: Schlagschatten (-10px 10px 20px #fff000);
}

Elegant

Wenn Sie Minimalismus lieben, dann passt dieser Textschatteneffekt perfekt. Da es eine große Schriftgröße verwendet, haben wir die Buchstaben-Abstand und angewendet Text-Schatten Eigenschaft, um diesen Effekt zu erzeugen.

Ausgabe

HTML

 Schatten #10 


S
h
R
ein
D
D
h
ein

CSS

.elegant {
Schriftfamilie: Impact, Haettenschweiler, 'Arial Narrow Bold', serifenlos;
Schriftgröße: 10rem;
Buchstabenabstand: -1rem;
Farbe weiß;
Textschatten: -18px 8px 18px #b4bbbb;
}

Spielerisch

Die dünne und fette Gliederung macht diesen Text attraktiv und lebendig. Sie können mit dem herumspielen Text-Schatten Eigenschaft ohne Unschärferadius an verschiedenen Positionen. Textschatten gelten für alle Zeichen, einschließlich HTML-Entitäten wie ♥. Sie können a. verwenden Charakter-Entitäts-Referenztabelle weiter zu erkunden.

Ausgabe

HTML

 Schatten #11 
Codierung ist

CSS

.verspielt {
Schriftfamilie: 'Baloo Tamma', kursiv;
Farbe: #fff;
Buchstabenabstand: 0,2rem;
Textschatten: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Experimentieren Sie weiter mit erweiterten Schatteneffekten

Textschatten sind eine einfache und effektive Möglichkeit, Ihr Webdesign zu verbessern und Ihre Website optisch ansprechend zu gestalten. Sie können auch mit verschiedenen Schatteneffekten experimentieren. Sie können mehr über Schlagschatteneffekte erfahren, um Ihre CSS-Reise fortzusetzen.

Naincy Moury (15 Artikel veröffentlicht)

Naincy ist spezialisiert auf den Aufbau von hoch responsiven Websites und einer effizienten Content-Strategie sowie Web-Kopien. Sie ist eine freiberufliche Tech-Autorin, die Trendtechnologien im Auge behält.

Mehr von Naincy Mourya