CSS: Text mit Kontur & Rand erstellen – So gehts

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

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

Dies ist mein Text mit Kontur

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

Dies ist mein Text mit Kontur

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

Dies ist mein Text mit Kontur

Hat dir der Beitrag gefallen?


    css        css text kontur   

Das könnte dich interessieren!

Weitere Kategorien






Schreibe einen Kommentar



30939