Schatteneffekte in CSS

Es gibt eine Vielzahl von Möglichkeiten, Schatten mit CSS zu erzeugen. In diesem Ausschnitt werden wir Ihnen über detailreiche Text- und Boxschatten und verschiedene Arten der Implementierung von Schatteneffekten erzählen.

Textschatten

Um Ihrem Text einen Schatten hinzuzufügen, müssen Sie die CSS-Eigenschaft text-shadow verwenden. Diese Eigenschaft ist eine einfache Möglichkeit, mit Texten zu arbeiten und verschiedene Effekte zu erzeugen. Mit der Eigenschaft text-shadow müssen Sie vier Variablen definieren; die ersten beiden werden verwendet, um die Position des Schattens festzulegen (horizontale Schatten und vertikale Schatten), der dritte Wert wird verwendet, um den Betrag der Weichzeichnung anzugeben und der vierte definiert die Farbe des Schattens.

Syntax

text-shadow: horizontal vertical blur color;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 200px;
      margin: 0 auto;
      padding: 10px;
      background: #262626;
      font-size: 100px;
      font-family: Arial, Helvetica, sans-serif;
      }
      p {
      color: #1a1a1a;
      text-shadow: 1px 2px 3px #666666;
      }
    </style>
  </head>
  <body>
    <div>
      <p><strong>W3DOCS</strong></p>
    </div>
  </body>
</html>

Doppelter Schatten

Textschatten bieten Ihnen auch eine erstaunliche Möglichkeit, doppelte Schatten zu erzeugen. Mit einem Komma können Sie die Deklarationen trennen, es ist möglich, so viele Schatten zu geben, wie Sie wollen!

Beachten Sie bitte, dass es nach den ersten beiden Schatten ein Komma und nach dem letzten Schatten ein Semikolon gibt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      width: 500px;
      margin: 0 auto;
      padding: 10px;
      background: #fff;
      font-size: 100px;
      font-family: Arial, Helvetica, sans-serif;
      }
      p {
      color: #333333;
      text-shadow: 4px 3px 0px #fff, 9px 8px 0px #ccc;
      }
    </style>
  </head>
  <body>
    <div>
      <p><strong>W3DOCS</strong></p>
    </div>
  </body>
</html>

Sie können auch die Eigenschaft text-shadow verwenden, um einen Rahmen um Ihren Text zu erstellen. Hier müssen Sie mehrere Schatten und auch negative Pixel verwenden, um das Gleichgewicht zu halten.

Beispiel

Rahmen um den Text herum

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h1 {
      color: #8ebf42;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
      }
    </style>
  </head>
  <body>
    <h1>Rahmen um den Text herum</h1>
  </body>
</html>

Box-Schatten

Mithilfe der Eigenschaft box-shadow können Sie Schatteneffekte für Ihre Boxen erzielen. Sie können auch Boxschatten verwenden, während Sie Formulare verwenden.

Erfahren Sie mehr über Mailto-Formen.

Bei der Eigenschaft box-shadow benötigen Sie fünf Variablen zur Definition: horizontaler Versatz (erforderlich), ein positiver Wert wird den Schatten auf die rechte Seite des Kastens legen, und ein negativer Versatz wird den Schatten auf die linke Seite des Kastens legen; vertikaler Versatz (erforderlich) des Schattens, ein negativer Wert bedeutet, dass der Kastenschatten über dem Kasten liegt, ein positiver Wert bedeutet, dass der Schatten unter dem Kasten liegt; Weichzeichnungsradius (erforderlich), wenn dieser Wert auf 0 gesetzt wird, ist der Schatten scharf, eine höhere Zahl macht ihn unschärfer; Spreadradius (optional), ein positiver Wert erhöht die Größe und ein negativer Wert verringert die Größe des Schattens (Standard ist 0, das bedeutet, dass der Schatten die gleiche Größe wie die Unschärfe hat; und color (erforderlich), wird verwendet, um die Farbe des Schattens zu definieren (lernen Sie mehr über HTML-Farben). Wenn der Farbwert verfehlt wird, nimmt der Schatten des Rahmens die Textfarbe an.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      }
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      }
      div {
      padding: 10px;
      border: 0.5px solid #1c87c9;
      border-radius: 20px;
      line-height: 4em;
      box-shadow: 0 0 18px 0 #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Schatten um die Grenze herum</h1>
    </div>
  </body>
</html>

Außerdem ist es möglich, die Farbe des Box-Schatteneffekts zu ändern, wenn die Maus darüber steht. Zu diesem Zweck geben Sie Ihrem Hover ein zusätzliches Styling, indem Sie Box-Shadow für ihn definieren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      }
      body {
      display: flex;
      align-items:center;
      justify-content:center;
      }
      div {
      padding: 10px 20px;
      border-radius: 30px;
      line-height: 4em;
      box-shadow: 0 0 18px 0 #1c87c9;
      }
      div:hover {
      box-shadow: 0 0 18px 0 red;
      cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Die Maus hier bewegen!</h1>
    </div>
  </body>
</html>

Wenn Sie weiter gehen und innere Boxschatten haben möchten, können Sie einfach den Wert “inset” für Ihren Boxschatten verwenden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      }
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #095484;
      }
      div {
      padding: 10px 20px;
      border-radius: 30px;
      line-height: 4em;
      box-shadow: 0 0 20px #095484;
      }
      div:hover {
      box-shadow: inset 0 0 70px #095484;
      cursor: grab;
    </style>
  </head>
  <body>
    <div>
      <h1>Die Maus hier bewegen, um den inneren Schatten zu sehen.</h1>
    </div>
  </body>
</html>

Nun sehen wir ein komplettes Paket mit beeindruckenden Box-Schatteneffekten, die Sie kopieren und verwenden können:

Denken Sie daran, dass es einfach ist, Ihre Boxen zu gestalten, wenn sie in ein Element <div> eingefügt werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      body {
      background: #b7d0e2;
      }
      .box h3 {
      text-align: center;
      position: relative;
      top: 80px;
      }
      .box {
      width: 70%;
      height: 200px;
      background: #d9d9d9;
      margin: 40px auto;
      color: #577491;
      }
      /*==================================================
      * Effect 1
      * ===============================================*/
      .effect1 {
      -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
      box-shadow: 0 10px 6px -6px #777;
      }
      /*==================================================
      * Effect 2
      * ===============================================*/
      .effect2 {
      position: relative;
      }
      .effect2:before, .effect2:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 15px;
      left: 10px;
      width: 50%;
      top: 80%;
      max-width: 300px;
      background: #777;
      -webkit-box-shadow: 0 15px 10px #777;
      -moz-box-shadow: 0 15px 10px #777;
      box-shadow: 0 15px 10px #777;
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
      }
      .effect2:after {
      -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);
      right: 10px;
      left: auto;
      }
      /*==================================================
      * Effect 3
      * ===============================================*/
      .effect3 {
      position: relative;
      }
      .effect3:before {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 15px;
      left: 10px;
      width: 50%;
      top: 80%;
      max-width: 300px;
      background: #777;
      -webkit-box-shadow: 0 15px 10px #777;
      -moz-box-shadow: 0 15px 10px #777;
      box-shadow: 0 15px 10px #777;
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
      }
      /*==================================================
      * Effect 4
      * ===============================================*/
      .effect4 {
      position: relative;
      }
      .effect4:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 15px;
      right: 10px;
      left: auto;
      width: 50%;
      top: 80%;
      max-width:300px;
      background: #777;
      -webkit-box-shadow: 0 15px 10px #777;
      -moz-box-shadow: 0 15px 10px #777;
      box-shadow: 0 15px 10px #777;
      -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);
      }
      /*==================================================
      * Effect 5
      * ===============================================*/
      .effect5 {
      position: relative;
      }
      .effect5:before, .effect5:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 25px;
      left: 10px;
      width: 50%;
      top: 80%;
      max-width: 300px;
      background: #777;
      -webkit-box-shadow: 0 35px 20px #777;
      -moz-box-shadow: 0 35px 20px #777;
      box-shadow: 0 35px 20px #777;
      -webkit-transform: rotate(-8deg);
      -moz-transform: rotate(-8deg);
      -o-transform: rotate(-8deg);
      -ms-transform: rotate(-8deg);
      transform: rotate(-8deg);
      }
      .effect5:after {
      -webkit-transform: rotate(8deg);
      -moz-transform: rotate(8deg);
      -o-transform: rotate(8deg);
      -ms-transform: rotate(8deg);
      transform: rotate(8deg);
      right: 10px;
      left: auto;
      }
      /*==================================================
      * Effect 6
      * ===============================================*/
      .effect6 {
      position:relative;
      -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      .effect6:before, .effect6:after {
      content: "";
      position: absolute;
      z-index:-1;
      -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
      -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
      box-shadow: 0 0 20px rgba(0,0,0,0.8);
      top: 50%;
      bottom: 0;
      left: 10px;
      right: 10px;
      -moz-border-radius: 100px / 10px;
      border-radius: 100px / 10px;
      }
      .effect6:after {
      right: 10px;
      left: auto;
      -webkit-transform:skew(8deg) rotate(3deg);
      -moz-transform:skew(8deg) rotate(3deg);
      -ms-transform:skew(8deg) rotate(3deg);
      -o-transform:skew(8deg) rotate(3deg);
      transform:skew(8deg) rotate(3deg);
      }
      /*==================================================
      * Effect 7
      * ===============================================*/
      .effect7 {
      position:relative;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      .effect7:before, .effect7:after {
      content: "";
      position: absolute;
      z-index: -1;
      -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
      -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
      box-shadow: 0 0 20px rgba(0,0,0,0.8);
      top: 0;
      bottom: 0;
      left: 10px;
      right: 10px;
      -moz-border-radius: 100px / 10px;
      border-radius: 100px / 10px;
      }
      .effect7:after {
      right: 10px;
      left: auto;
      -webkit-transform: skew(8deg) rotate(3deg);
      -moz-transform: skew(8deg) rotate(3deg);
      -ms-transform: skew(8deg) rotate(3deg);
      -o-transform: skew(8deg) rotate(3deg);
      transform: skew(8deg) rotate(3deg);
      }
      /*==================================================
      * Effect 8
      * ===============================================*/
      .effect8 {
      position: relative;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      .effect8:before, .effect8:after {
      content: "";
      position: absolute;
      z-index: -1;
      -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
      -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
      box-shadow: 0 0 20px rgba(0,0,0,0.8);
      top: 10px;
      bottom: 10px;
      left: 0;
      right: 0;
      -moz-border-radius: 100px / 10px;
      border-radius: 100px / 10px;
      }
      .effect8:after {
      right: 10px;
      left: auto;
      -webkit-transform: skew(8deg) rotate(3deg);
      -moz-transform: skew(8deg) rotate(3deg);
      -ms-transform: skew(8deg) rotate(3deg);
      -o-transform: skew(8deg) rotate(3deg);
      transform: skew(8deg) rotate(3deg);
      }
    </style>
  </head>
  <body>
    <div class="box effect1">
      <h3>Effekt 1</h3>
    </div>
    <div class="box effect2">
      <h3>Effekt 2</h3>
    </div>
    <div class="box effect3">
      <h3>Effekt 3</h3>
    </div>
    <div class="box effect4">
      <h3>Effekt 4</h3>
    </div>
    <div class="box effect5">
      <h3>Effekt 5</h3>
    </div>
    <div class="box effect6">
      <h3>Effekt 6</h3>
    </div>
    <div class="box effect7">
      <h3>Effekt 7</h3>
    </div>
    <div class="box effect8">
      <h3>Effekt 8</h3>
    </div>
  </body>
</html>