8 einfache Schatteneffekte mit CSS3 und box-shadow

8 coole und interessante CSS3 Schatten verschönern Ihre Webseite

8 CSS3 Shatten

Mit Schatteneffekten und CSS3 kann man einzelne Elemente auf einer Website ganz toll und einfach aufpeppen. Mit der CSS3-Anweisung box-shadow ist fast jede erdenkliche Form von Schatten möglich, wenn man nur weiß, wie. Die Formatierung verschiedener Schatten ist damit wirklich viel einfacher geworden.

Die Erstellung von Schlagschatten bis hin zu feinen und diffusen Schattenwürfen sind für Webdesigner mit CSS3 und box-shadow super realistisch nachzubauen – und das ohne ein Grafikprogramm bemühen zu müssen.

8 einfache und coole CSS3 Schatten als Musterbeispiele

Auf der Webseite von Codepen.io habe ich 8 Schatteneffekte gefunden, welche der Webdesigner Julio Corpus erstellt und zum kostenlosen Download zur Verfügung gestellt hat.

Wichtig!
Ich möchte Sie darauf aufmerksam machen, dass CSS3 Schatten nur in den neuesten und aktuellsten Browsern funktionieren. In den Mobilversionen (Smartphone, Tablets) werden diese möglicherweise fehlerhaft bis gar nicht dargestellt!

Den 8 CSS-Boxen werden zuerst einzelne und separate Hintergrundfarben zugewiesen. Daneben werden die Boxen entsprechend formatiert. Jede CSS-Box erhält anschließend eine spezielle Formatierung, wodurch den einzelnen Schatten die Effekte hinzugefügt werden.

Schatten Nr. 1
01 - Schatten rot

HTML

Shadow 1

CSS

.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}

Schatten Nr. 2
02 - Schatten gelb

HTML

Shadow 2

CSS

.shadow2:before{
  position:absolute;
  content:"";
  width:80%;
  top:140px;bottom:15px;left:30px;
  background-color:#9F8641;
  z-index:-1;
  -webkit-box-shadow:0 23px 17px 0 #9F8641;
  -moz-box-shadow:0 23px 17px 0 #9F8641;
  box-shadow: 0 23px 17px 0 #9F8641;
  -webkit-transform:rotate(-4deg);
  -moz-transform:rotate(-4deg);
  transform:rotate(-4deg);
}

Schatten Nr. 3
03 - Schatten grün

HTML

Shadow 3

CSS

.shadow3:before, .shadow3:after{
  content:"";
  position:absolute;
  bottom:0;top:2px;left:15px;right:15px;
  z-index:-1;
  border-radius:100px/30px;
 -webkit-box-shadow:0 0 30px 2px #479F41;
  -moz-box-shadow:0 0 30px 2px #479F41;
  box-shadow: 0 0 30px 2px #479F41;
}

Schatten Nr. 4
04 - Schatten dunkelgrün

HTML

Shadow 4

CSS

.shadow4:before, .shadow4:after{
  position:absolute;
  content:"";
  top:14px;bottom:14px;left:0;right:0;
  box-shadow:0 0 25px 3px #548E7F;
  border-radius:100px/10px;
  z-index:-1;
}

Schatten Nr. 5
05 - Schatten blau

HTML

Shadow 5

CSS

.shadow5:before, .shadow5:after{
  position:absolute;
  content:"";
  box-shadow:0 10px 25px 20px #518C96;
  top:40px;left:10px;bottom:50px;
  width:15%;
  z-index:-1;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.shadow5:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;left: auto;
}

Schatten Nr. 6
06 - Schatten dunkelblau

HTML

Shadow 6

CSS

.shadow6:before, .shadow6:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px;
} 

Schatten Nr. 7
07 - Schatten rosa

HTML

Shadow 7

CSS

.shadow7:before, .shadow7:after{
  position:absolute;
  content:"1";
  top:25px;left:20px;bottom:150px;
  width:80%;
  z-index:-1;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow7:before{
  box-shadow:10px -10px 30px 15px #984D8E;
}
.shadow7:after{
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  transform: rotate(7deg);
  bottom: 25px;top: auto;
  box-shadow:10px 10px 30px 15px #984D8E;
}

Schatten Nr. 8
08 - Schatten violett

HTML

Shadow 8

CSS

.shadow8{
  box-shadow:
 -6px -6px 8px -4px rgba(250,254,118,0.75),
  6px -6px 8px -4px rgba(254,159,50,0.75),
  6px 6px 8px -4px rgba(255,255,0,0.75),
  6px 6px 8px -4px rgba(0,0,255,2.75);
}

Das Originalbeispiel können Sie auf Codepen.io/Julio Corpus ansehen und nach dem Klicken auf den Button „Share“ als ZIP-Datei auf Ihren PC herunterladen.

Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *