Webstandard & Webdesign - CSS, HTML

 

CSS3 Tutorial - Website-Navigation - Border-Radius

CSS3-Tutorial - Inspiriert von dem hier im Webstandard-Blog kürzlich vorgestellten CSS-Tutorial "The hidden power of border-radius" und der vielerorts ausgetragenen Diskussionen zum Thema Progressive Enhancement im Bereich Webdesign bezüglich vorhandener Webstandards, ist das folgende kleine aber hoffentlich für den ein oder anderen Leser inspirierende CSS3-Tutorial mit Hauptaugenmerk auf der CSS3 Eigenschaft Border-Radius und den damit durchaus vorhandenen Gestaltungsmöglichkeiten entstanden. Keine Tricks, keine Zauberei und vor allem keinerlei Grafiken (!), lediglich ein paar übersichtliche Zeilen CSS. Aber seht selbst!

CSS3 Tutorial - Step 1: Definieren der HTML-Struktur der Navigation

Das HTML-Grundgerüst einer Navigation ist, der Bedeutung der Inhalte entsprechend, im Idealfall ein Liste. In diesem Tutorial werden für 3 fiktive Navigationspunkte mit den Bezeichnungen "Brand", "Promotion" und "Event" verwendet. Das Browser-Stylesheet dessen Eigenschaften bei dem aktuellen Stand der Dinge Anwendung finden, sorgen noch für eine recht unspektakuläre Darstellung der Navigation ( siehe Abbildung 1 ).

Code-Beispiel
...
<div class="css3Tutorial">
  <ul>
    <li id="brand"><a href="#">Brand</a></li>
    <li id="promotion"><a href="#">Promotion</a></li>
    <li id="event"><a href="#">Event</a></li>
  </ul>
</div> ...


Abb. 1: HTML-Struktur der Navigation ohne CSS

CSS3 Tutorial - Step 2: Anlegen der Hintergrundfarbe der Navigation

Um dem Ganzen in diesem CSS3 Tutorial nun auch ein wenig Farbe zu geben, wird dem Bereich mit der Klasse .css3Tutorial eine Hintergrundfarbe zugewiesen. Die anderen Angaben bezüglich Breite, Höhe und Innenabstand beziehen sich lediglich auf eine passende Darstellung des CSS-Tutorials hier im Blog.

Code-Beispiel
.css3Tutorial {
  background: #14080a;
  width:506px;
  height:260px;
  padding:20px;
}

Abb. 2: Anlegen der Hintergrundfarbe der Navigation

CSS3 Tutorial - Step 3: Runde Navigationspunkte dank Border-Radius

Die Listenpunkte li rund statt wie meistens bisher eckig abbilden zu können ist relativ simpel, man legt eine Breite von 120 Pixeln fest und versieht diese mit einem Radius von 60px. Da dieser Radius für alle "Ecken" angewendet wird ensteht ein Kreis. Um die im Listenpunkt enthaltenen Verlinkungen zentrieren zu können, wird noch einen Innenabstand padding von je 20 Pixel hinzugefügt. Da die Breite und die Höhe bzw. der Durchmesser 120 Pixel betragen sollen und somit bereits 40 Pixel für den Innenabstand vergeben wurden, wird für die Breiten und Höhenangabe der Wert von 80 Pixeln benouml;tigt ( 80px+40=12px ). Wer an dieser Stelle den Wert für die Höhe auf 100px setzt, der hat mit dem CSS-Tutorial bis hierher vielleicht schon einen Ansatz für eine Navigationsidee zu Ostern ;o)

Code-Beispiel
ul {
  list-style: none;
}
li {
  float:left;
  font: 14px/10px Arial, Verdana, sans-serif;
  color:#FFF;
  background-color: #b6f5fe;
  width: 80px;
  height: 80px;
  padding:20px;
  margin:0 30px 0 0;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
}

Abb. 3: Runde Navigationspunkte dank Border-Radius

CSS3 Tutorial - Step 4: Ausrichten der Navigationspunkte

Im folgenden und somit vierten Arbeitsschritt sorgt ihr eigentlich nur für eine farblich differenzierte Darstellung und Position der zum Einsatz kommenden Navigationspunkte.

Code-Beispiel
li#brand {
  background-color: #e1f5b8;
}
li#promotion {
  background-color: #b6f5fe;
  margin-top:100px;
}
li#event {
  background-color: #f9bde6;
  margin-top:50px;
}

Abb. 4: Ausrichten der Navigationspunkte

CSS3 Tutorial - Step 5: Ausrichten der Links innerhalb des Navigationspunktes

Da die verlinkten Navigationspunkte "Brand", "Promotion" und "Event" nicht nur unscheinbar am Radius "kleben" sollen, sondern für ein gewisse Wiedererkennung der Navigation sorgen sollen, müssen in diesem Arbeitsschritt in Sachen Ausrichtung ( Width, Height, Padding, Margin, Border-Radius ) einige Vorkehrungen getroffen werden. Das "Komplizierte" an der Sache ist dem Inline-Element a in diesem CSS3 Tutorial, welches von Haus aus eigentlich keinen eigenen Absatz im Textfluss erzeugt und somit auch resistent gegen Außenabstände wäre, die dafür nötigen Eigenschaften zur Zentrierung mit an die Hand zu geben.

Als Erstes macht ihr dieses Element daher zu einem Block-Element ( display:block ), damit es dann mit den entsprechenden Werten der beschriebenen Eigenschaften eine Art "inneren Kern" in dem jeweiligen Listenpunkt bildet. Um die gewünschte Darstellung zu erhalten, sollten die Werte verständlicherweise einen geringeren Wert als den in Schritt 3 dieses CSS-Tutorials vergebenen WErt von 120Pixel besitzen. Wer an dieser Stelle ein wenig mit den entsprechenden Werten experimentiert, wird an dieser Stelle durchaus die ein oder andere interessante Darstellung als Ergebnis erhalten können. Zum Abschluß definiert ihr auch für diese "inneren Kerne" farblich differenzierte Werte, die die Aufmerksamkeit noch mehr auf die jeweiligen Navigationspuntke richtet.

Code-Beispiel
li a {
  color:#FFF;
  text-decoration:none;
  display:block;
  width: 80px;
  height: 45px;   text-align: center;
  padding:35px 0 0 0;
  margin:0 40px 0 0;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
li#brand a {
  background-color: #afe43f;
}
li#promotion a {
  background-color: #03aec7;
}
li#event a {
  background-color: #ba1886;
}

Abb. 5: Ausrichten der Links innerhalb des Navigationspunktes

CSS3 Tutorial - Step 6: Definieren der Eigenschaften für den Hover-Effekt

Eigentlich könnte man jetzt sagen, dass man das Ende dieses CSS3-Tutorials erreicht hat. Da aber in Sachen einer "vorbildlichen Benutzerführung" der User auch eine visuelle Information erhalten soll, wenn er sich auf einem der Navigationspunkte befindet, wird für den "Zustand der Berührung" des Links ( hover, focus, active ) der "innere Kern" auf die Gesamtbreite des jeweiligen Navigationspunktes ausgedehnt. Hierzu muss lediglich der Innenabstand der Listenpunkte li überbrückt werden. Dies könnt ihr erreichen, wenn ihr die Breite für diese Zustände von 80px auf 120px und die Höhe von 45px auf 65px erhöht. Da die Verlinkung dann den Listenpunkt allerdings nur überlappen würde, aber nicht deckungsgleich wäre, muss der innere Kern aufgrund der Zentrierung über negative Außenabstände nach links oben ( margin:-20px 0 0 -20px; ) gezogen werden.

Code-Beispiel
li a:hover,
li a:focus,
li a:active {
  width: 120px;
  height:65px;
  padding:55px 0 0 0;
  margin:-20px 0 0 -20px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
}

Abb. 6: Definieren der Eigenschaften für den Hover-Effekt

Kein CSS3-Support, kein Border-Radius!

Für diejenigen die mit einem der Browser dieses Tutorial besucht haben, die CSS3 bereits jetzt unterstützen ( bspw. die neueren Firefox- und Safari-Versionen ), sei in der folgenden Abbildung ein Blick auf den Internet Explorer und seine Interpretation der Navigation geworfen.

So sieht es der Internet Explorer bis einschließlich Version 8

Browsercheck dieses CSS3 Tutorials

Wenn der Browser mit dem du dieses CSS3-Tutorial besuchst Eigenschaften wie Border-Radius unterstützt, dann dürfte die Darstellung der Navigation in etwa Abbildung 6 entsprechen - Ab zum Browsercheck! Wer sich einen Überblick darüber verschaffen möchte, wie diese CSS3 Eigenschaft von den verschiedensten Browser(versione)n auf verschiedenen Betriebssystemen unterstützt werden, der sich die entsprechenden Screenshots dieser "Navigation" unter Browsershots.org ansehen.

View Tutorial Demo

Ich hoffe Euch hat dieses CSS3-Tutorial mit einem kleinen Ausblick auf CSS3 gefallen und vielleicht dazu beigetragen, im Sinne von Progressive Enhancement, diesbezüglich ein wenig mehr über den bisher bekannten Tellerrand zu schauen. Sicherlich kann man das Design dieser Navigation mit weiteren Eigenschaften aus CSS3 noch etwas ausbauen, aber mehr dazu vielleicht in einem späteren auf diesem Workshop aufbauenden Tutorial...

Ähnliche Artikel zu diesem Thema:

• CSS3 Tutorial - Sliding Navigation without JavaScript