CSS-3D-Effekt: Aussparung
Bei meinem letzten Layouts hatte ich in der Haupt-Navigation einen Effekt verwendet: Der aktive Navigationspunkt sah wie eine Aussparung aus:
Wie man zu diesem kommt, erkläre ich schrittweise.
Zunächst einmal als Ausgangslage der Navigationspunkt ohne einen Hintergrund:
Der HTML-Code der Navigation sieht ganz klassisch etwa so aus:
<ul id="mmain"> <li>..</li> <li class="current"> <a href="zielseite.html"><span>Batch</span></a> </li> <li>..</li> <li>..</li> </ul>
Schritt 1:
Als Hintergrund füge ich die Grafik ein, die ich im Contentbereich verwende. Der orange Bereich im Header wird damit scheinbar ausgeschnitten. Unterschiedliche border-radius-Angaben sorgen für verschiedene Radien an den Ecken:
#mmain .current a{ ... background: url("/images/bg_body.png"); border-radius: 5px; border-top-left-radius: 18px; border-bottom-right-radius: 18px; ... }
Schritt 2:
Einen 3-dimensionalen Touch, dass es tiefer nach innen geht, bekommt das Ganze durch 2 Effekte. Zum einen einen Rahmen: oben und links etwas dunkler; rechts und unten etwas heller.
#mmain .current a{ ... border: 1px solid rgba(0,0,0,0.25); border-right: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); ... }
Schritt 3:
Effekt 2 ist der Effekt box-shadow. Dieser zeichnet allg. einen Schattenwurf eines Elements. Mit dem Schlüsselwort “inset” wird der Effekt nicht aussen um ein Element sondern innerhalb angewendet:
#mmain .current a{ ... box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25) inset; ... }
Kommentar hinzufügen
Die Felder Name und Kommentar sind Pflichtfelder.