😊 🌱 ☀️   
    Blogseite.com



veröffentlicht am: 30. Mai 2024

CSS: Text mit Kontur erstellen – So gehts

 Home   ➡️  CSS  ➡️  CSS: Text mit Kontur 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

text-shadow

CSS
text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

Die Eigenschaft text-shadow ermöglicht es dir, einen Schatten um deinen Text herum zu erstellen, der als Kontur wahrgenommen werden kann. Du kannst die Farbe, den Versatz und die Größe des Schattens anpassen.

Text mit Kontur: Beispiel 1

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

HTML
<!DOCTYPE html>
<html lang="de">
  <head>
  <style>
  .text1{
color:#FFF;
font-size:50px;
text-shadow: 1px  1px 1px #000,
             1px -1px 1px #000,
             -1px  1px 1px #000,
             -1px -1px 1px #000;
}
  </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <span class="text1">Dies ist mein Text mit Kontur</span>
  </body>
</html>

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

HTML
<!DOCTYPE html>
<html lang="de">
  <head>
  <style>
.text2{
color:#FFF;
font-size:60px
text-shadow: 2px  2px 2px #c01b55,
             2px -2px 2px #c01b55,
             -2px  2px 2px #c01b55,
             -2px -2px 2px #c01b55;
}
  </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <span class="text12">Dies ist mein Text mit Kontur</span>
  </body>
</html>

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

HTML
<!DOCTYPE html>
<html lang="de">
  <head>
  <style>
.text3{
color:black;
font-size:60px
text-shadow: 2px  2px 2px #00bbcc,
             2px -2px 2px #00bbcc,
             -2px  2px 2px #00bbcc,
             -2px -2px 2px #00bbcc;
}
  </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <span class="text12">Dies ist mein Text mit Kontur</span>
  </body>
</html>

Ergebnis

Dies ist mein Text mit Kontur

Textrand

Die Eigenschaft text-stroke fügt einen Strich um deinen Text herum hinzu, der als Rand wahrgenommen wird. Du kannst die Farbe und die Dicke des Strichs anpassen.

CSS
text-stroke: <stroke-width> <color>;

CSS
h1 {
  text-stroke: 2px #ff0000; /* Roter Rand mit 2px Dicke */
}

Ergebnis

Dies ist ein Textrand

Kontur und Rand kombiniert:

Du kannst die Eigenschaften text-shadow und text-stroke auch miteinander kombinieren, um sowohl einen Schatten als auch einen Rand um deinen Text herum zu erstellen.

CSS
span {
  text-shadow: 2px 2px 4px #000;
  text-stroke: 1px #ff0000;
}

Ergebnis

Dies ist ein Test

Beachte:

  • Die Eigenschaften text-shadow und text-stroke werden nicht von allen älteren Browsern unterstützt.
  • Falls du diese Eigenschaften verwenden möchtest, solltest du außerdem Fallback-Optionen mit text-decoration oder Bildern in Betracht ziehen.
  • Du kannst die Einstellungen für die Kontur und den Rand mit weiteren CSS-Eigenschaften wie font-family, font-size und font-weight kombinieren, um ein individuelles und ansprechendes Design zu erstellen.

Ähnliche Beiträge

    css        css text kontur   

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?



Smiley Bedeutung