Golb Slexa ::

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;
  ...
}