Christoph S. Ackermann

Unsere Augen interpretieren die Realität nicht nur durch Farben, sondern nehmen dabei u.a. Konturen,  Dreidimensionalität und Schatten als Wahrnehmung in Betracht. Um den Besucher ein nahes Gefühl zu geben, bemühen sich viele Web-Designer genau diese Eigenschaften in ihren Web-Projekten einzubinden.

CSS3 bringt bekanntlich viele Vorteile mit sich. Einer davon ist die Erstellung von Schatten für diverse Elemente. Zur Verdeutlichung zeige ich ein simples Beispiel wie man mit CSS3 einen leichten Schatten erstellen kann, welcher einen Wölbeffekt hervorruft.

Zuerst einmal erstellen wir unseren 1-zeiligen HTML-Code:

<div class="blueBox"></div>

Unsere CSS besteht aus lediglich einer Klasse, gefolgt von einem :before-Selector:

.blueBox {
width: 400px;
height: 300px;
margin: auto;
position: relative;
background-color: #1E8CBE;
}

.blueBox:before{
-webkit-transform: skew(0deg, 4deg);
box-shadow: 7px 7px 7px #000;
-moz-box-shadow: 7px 7px 7px #000;
-webkit-box-shadow: 7px 7px 7px #000;
position: absolute;
background-color: #000;
bottom: 2px;
right: 12px;
content: '';
z-index: -1;
width: 280px;
height: 25px;
}

Zur Erklärung:

  1. Mit der Klasse .blueBox erstellen wir eine klassische Box mit der Position relative.  Die Position ist für unseren nächsten Schritt besonders wichtig.
  2. Mit dem Selektor :before erstellen wir eine weitere Box. Dieser hat die Besonderheit sich mit der Hilfe von box-shadow und –webkit-transform zu schattieren und zu transformieren.  Damit unsere Haupt-Box, also die Klasse blueBox, unseren Selektor (oder zumindest nur ein Teil davon) als Schatten verwenden kann, setzen wir hierfür die z-index: -1 und ändern dabei die Position. Somit wird der Selektor hinter unserer Klasse platziert und das was zu sehen bleibt, ist lediglich ein leichter Schatten für unsere blueBox.

Demo

Eine Demo des Effekts ist hier verfügbar:

http://css3shadow.reza.cubelab.ch/

Schreibe einen Kommentar

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

Lust auf mehr?

8 Basisregeln für einen guten Newsletter

Sarah Berger
Wichtig zu wissen ist, dass ein Newsletter nicht …
Blogbeitrag ansehen

Tech Talk - "Advanced Custom Fields" Plugin

Christian Stampfli
Bereits seit langer Zeit setzen wir bei unseren …
Blogbeitrag ansehen
Gesicht mit UX Design Post-it auf der Stirn
UX

UX Irrtümer Teil 2 – Mach mal UX Design!

Dominik Schendl
Wie im letzten Artikel versprochen, geht es heute …
Blogbeitrag ansehen