CSS: Text mit Kontur & Rand erstellen – So gehts

Mit CSS lassen sich Texte mit einer Kontur erstellen. Wenn du also Texte mit Rand erstellen möchtest bist du hier richtig

Mit der CSS Funktion text-shadow lassen sich im Handumdrehen schöne Konturen für deine Überschriften erstellen.

Wie das geht zeige ich dir in diesem Beitrag.

Text mit Kontur: CSS Beispiel 1

In diesem Beispiel erstelle ich einen weißen Text mit einer schwarzen Kontur von 1px

.text1{

color:#FFF;
font-size:50px;
text-shadow: 1px  1px 1px #000,
             1px -1px 1px #000,
             -1px  1px 1px #000,
             -1px -1px 1px #000;
}

Ergebnis

Das Ergebnis ist ein weißer Text mit schwarzer Kontur bzw. Rand

Text mit Kontur: CSS Beispiel 2

In diesem Beispiel erstelle ich einen weißen Text roten #c01b55 Kontur von 2px

.text2{
color:#FFF;
font-size:60px
text-shadow: 2px  2px 2px #c01b55,
             2px -2px 2px #c01b55,
             -2px  2px 2px #c01b55,
             -2px -2px 2px #c01b55;
}

Ergebnis

Text mit Kontur: CSS Beispiel 3

Hier zeige ich dir noch ein drittes Beispiel mit einem schwarzen Text und einer blauen 2px #00bbcc Kontur

.text3{
color:black;
font-size:60px
text-shadow: 2px  2px 2px #00bbcc,
             2px -2px 2px #00bbcc,
             -2px  2px 2px #00bbcc,
             -2px -2px 2px #00bbcc;
}

Ergebnis

Hat dir der Beitrag gefallen?

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien