WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Wie kann ich einen Titel mit einem Schatten aufpimpen?

von | Mrz 7, 2019 | Allgemein, Mein Youtube Kanal, Youtube | 0 Kommentare

Schlagwörter: CSS - CSS3 - Mein Youtube Kanal

Im heutigen Video gehts um die einfache Frage, wie man denn einen Titel in einem Blogbeitrag mit einem Schatten verschönern kann.

Als erstes definiert ihr einen Titel und packt ihn zb in einen H3-Tag ein

Das Pferd frisst kein Gurkensalat

1
<h3 class="css-titel-mit-schatten">Das Pferd frisst kein Gurkensalat</h3>

Danach geht ihr in den Customizer rein und da in den CSS Bereich. Ihr könnt natürlich auch sonst euer CSS File via interner oder externer Editor erweitern. und da gebt ihr dann den folgenden Befehl ein.

1
2
3
.css-titel-mit-schatten {
text-shadow: 2px 5px 0 rgba(0,0,0,0.5);
}

Ich habe nun folgende Werte definiert und ins CSS eingetragen

1
text-shadow: 2px 5px 0 rgba(255,0,85,0.5);

Dann sollte der Titel so aussehen:

Das Pferd frisst kein Gurkensalat

Als Erklärung: 2px ist der Abstand auf die Seite, 5px ist der Abstand nach unten, 0 ist die Stärke des Text (10px wäre ziemlich verschwommen).

Die Zahlen bei rgba sind eigentlich nichts anderes als (Rot [0-255], Grün [0-255], Blau [0-255], Deckkraft [0-1])

Wer nicht nicht in der Lage ist, die RGB Codes im Kopf auszurechnen, für diese Leute habe ich hier noch eine URL mit einem coolen RGB Generator Dienst https://rgbcolorcode.com

Ihr könnt nun jeden H1-H6 Tag mit dieser css-titel-mit-schatten Klasse erweitern und diese Titel bekommen dann den gleichen farbigen Schatten.

Video Anleitung

Ihr seht einen Titel mit einem Schatten auszurüsten, ist gar nicht so schwer wie es klingt. Das schaffen nicht nur Profis sondern jetzt alle die diese Anleitung gelesen haben. Ich wünsche euch viel Spass mit dem Aufpimpen von euren Titeln.





0 Kommentare

Einen Kommentar abschicken

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