CSS: Text Shadow.md

text-shadow

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

Text mit Kontur: Beispiel 1

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

<!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>

Text mit Kontur: CSS Beispiel 2

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

<!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>

Text mit Kontur: CSS Beispiel 3

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

<!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>

Lego2012/CSS: Text Shadow.md

text-shadow

Text mit Kontur: Beispiel 1

Text mit Kontur: CSS Beispiel 2

Text mit Kontur: CSS Beispiel 3