gironimo.org

Wer ist es nicht langsam leid, immer wieder die tollen Photoshop Designvorlagen zu slicen nur um damit viele einzelne Bilder (oder ein etwas größeres, mit Sprites) zu erstellen die schlussendlich auf der Webseite verwendet werden sollen. Dabei geht es auch soviel einfacher seitdem es HTML5 und CSS3 endlich gibt.

Mithilfe von CSS3 kann beispielsweise ein Text einen Schatten bekommen oder ebenso eine ganze Box. Verläufe im Hintergrund sind auch möglich ohne Bilder zu verwenden. Eigene Schriftarten können auf die Webseite eingebettet, usw usf.

Für jeden Webdesigner/Webentwickler ist es ein Muss, sich mit HTML5 und CSS3 zu beschäftigen. Doch wo liegt der Vorteil? Ganz klar, die Performance ist deutlich besser, außerdem müssen sich Webentwickler ohne große Photoshop Kenntnisse nicht mehr abmühen, bis sie endlich an die richtige Arbeit können.

Im folgenden möchte ich euch zeigen, was mit mit der CSS3 Eigenschaft box-shadow möglich ist.

Jedoch ist ein viel „schönerer“ Effekt ebenfalls möglich:

Das alles ist möglich mit reinem CSS und einem DIV! Also ran an die Arbeit!

1. Schritt: Grundgerüst erstellen

In eurem HTML-Dokument reicht es wenn ihr folgendes erstellt:

<div id="box">
    Nice CSS3 Box Shadow
</div>

Mit einem einzigen DIV können wir viele tolle Sachen in CSS machen. Wir werden nun einen Verlauf, text-shadow, box-shadow sowie die etwas experimentelle CSS Eigenschaft transform: matrix verwenden.

2. Schritt: CSS Grundlayout

Achtung: Es sind hier nur Webkit Prefixe eingearbeitet. Mozilla (-moz-) und Opera (-o-) fehlen hier, können aber selbstverständlich ebenfalls verwendet werden.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #ddd;
    font-family: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;
    font-size: 100.01%;
}
#box {
    width: 300px;
    height: 220px;
    margin: 50px auto;
    position: relative;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 10px;
    font-size: 2em;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(1, 1, 1, 0.8);
    text-align: center;
    padding-top: 80px;
}

Also was machen wir? Wir geben unserer Box eine Höhe, Breite sowie position: relative, das wir später noch brauchen, sowie einen Hintergrundverlauf mit gradient. Die Box bekommt auch gleich einen einfachen Schatten. Zudem setzen wir Angaben zur Schrift.

3. Schritt: Pseduo Klassen :before und :after machen tolle Effekte

Mit den Pseudo Klassen :before und :after werden wir nun den Effekt zaubern. Beide müssen position: absolute bekommen, damit wir sie genau auf die Box ausrichten können (merke position: relative von #box). Zudem setzen wir beide Pseudo Klassen mit einem z-index hinter die Box. Dort wo ein Schatten auch sein sollte…

#box:before,
#box:after {
    position: absolute;
    content:'';
    background-color: transparent;
    bottom: 12px;
    width: 70%;
    height: 60px;
    z-index: -1;
    -webkit-border-radius: 10px;
}
#box:before {
    -webkit-box-shadow: -14px 12px 10px rgba(2, 2, 2, 0.6);
    -webkit-transform: matrix(1, -0.05, -0.2, 1, 0, 0);
    left: 15px;
}
#box:after {
    -webkit-box-shadow: 14px 12px 10px rgba(2, 2, 2, 0.6);
    -webkit-transform: matrix(1, 0.05, 0.2, 1, 0, 0);
    right: 15px;
}

Hier kommt CSS3 richtig zum Einsatz. Mithilfe von rgba Angaben und box-shadow erzeugen wir eine neue Box mit Schatten (jeweils für :before und :after). Die transformieren wir. Mit einer Matrix Angabe können wir die Box unseren Wünschen anpassen. Wer dazu mehr Informationen möchte, sollte sich die Spezifikation des W3 ansehen.

Versucht mal den z-index wegzulassen, bzw höher zu stellen, und ihr werdet sehen, welche Boxen, die als Schatten herhalten, wirklich erzeugt werden. Viel Spaß dabei.

Wer eine kreative und innovative CSS3 und HTML5 Homepage erstellen möchte, jedoch nicht selbst Hand anlegen will, sollte sich mal bei der Webagentur Team23 umsehen.