CSS3 Tutorial - Website-Navigation - Border-Radius

CSS3 Tutorial - Website-Navigation - Border-RadiusCSS3-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!

Modernes Webdesign mit CSS - Das neue Buch!

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

CSS3 Tutorial - HTML-Struktur der Navigation ohne CSS
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;
}

CSS3 Tutorial - Anlegen der Hintergrundfarbe der Navigation
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;
}

CSS3 Tutorial - Runde Navigationspunkte dank Border-Radius
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;
}

CSS3 Tutorial - Ausrichten der Navigationspunkte
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;
}

CSS3 Tutorial - Ausrichten der Links innerhalb des Navigationspunktes
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;
}

CSS3 Tutorial - Definieren des Hover-Effektes
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.

CSS3 Tutorial - So sieht es der IE
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:
  1. Andreas Kamleiter
    18 Feb 2010, 20:52

    Sehr geniales uns ausführliches Tutorial, das motiviert sich CSS3 einmal genau an zu sehen. Auf jeden Fall sind einige schöne Möglichkeiten dabei, die nur noch von den Browsern unterstützt werden müssen.


  2. Steve 19 Feb 2010, 16:08

    Kann mich Andreas nur anschliessen, klasse Tutorial! Da ich immer mit dem aktuellsten Safari unterwegs bin, ist meine Darstellung der Navigationspunkte, der Webkit-Engine sei Dank, nicht eckig ;o)


  3. Robert 21 Feb 2010, 16:46

    Vielen Dank für das Tutorial, echt super!
    Grüße und weiter so!


  4. Florian 22 Feb 2010, 09:43

    Super Tutorial!
    Ich traue mich allerdings derzeit noch nicht an diese Techniken, da doch sehr viele User mit Browsern ohne CSS3-Unterstützung im Web unterwegs sind. Schließlich möchte ich, dass die Dinge in allen Browsern möglichst gleich aussehen. Für die Zukunft aber sehr interessant und runde Ecken oder auch Schatten (-moz-box-shadow:) werden für den Webdesigner wesentlich einfacher.


  5. whip 27 Feb 2010, 22:52

    Wird das fein wenn man CSS3 dann in ein paar Jahren benutzen kann :)


  6. TGK 09 Jun 2010, 00:41

    Wow sehr schönes Tutorial, danke. CSS3 hab ich auch eingebaut, das sieht auch im IE ganz gut aus, auch wenn ohne runde Kurven, aber das wird die einfache Zukunft der Navigation sein, also weiter so
    Viele Grüße


  7. Rob
    25 Aug 2010, 12:26

    @Florian:

    CSS3 ist doch in den meisten Standardkonforme Browser implentiert.

    Nicht alles (z.B. Effekte wie wechselnder Hintergrundfarbe aber die muss man nicht zwingend haben) und manche einer Stellt eine Rotation (als Beispiel) nicht so flüssig dar, aber es funktioniert und die Seite ist komplett bedienbar.

    Dass die Programmierer des Internet Exploders zu ignorant sind, sich an den Standards zu halten, sollte nicht unser Problem sein.

    Diktaturen sind da um ignoriert zu werden.

    Und man kann ja die Effekte in eine separate CSS Datei weglassen und mit additional Comments für den Exploder bereitstellen :-)

    So verpassen die IE User zwar ein paar nette visuelle Effekte aber das ist dann Deren problem :-)

    Hier meine CSS3 Spielwiese:

    http://css3.webdesign-labor.de

    Gruß, Rob


  8. Nils
    19 Nov 2010, 12:05

    "Dass die Programmierer des Internet Exploders zu ignorant sind, sich an den Standards zu halten, sollte nicht unser Problem sein."

    Aber genau so ist es. Schliesslich sollen inhalte für alle erreichbar sein. Wir sind dazu übergegangen, dass die Inhalte zwar erreichbar, aber eben nicht "fancy" sind. Das wird mit Kunden auch so kommuniziert und da heisst es dann eben "Der IE unterstützt runde Ecken leider nicht…".

    Wir arbeiten gerade an der Mobilen-Variante unserer Seite und die wird dann eben auch für den IE


  9. Wolfgang 30 Nov 2010, 09:51

    Super, der kleine, aber feine Einstieg in die CSS3-Welt. Das wird toll und es macht einiges einfacher, wenn sich das mal durchsetzt und verbreitet ist. Ich denke, ich werde mich mal näher damit beschäftigen, um den CSS3-Zug nicht zu verpassen.


  10. Michael 25 Mai 2011, 11:08

    Richtig gut erklärt - ein super Tutorial.
    Das motiviert zum Ausprobieren. Vielen Dank.


  11. Webdesign 25 Mai 2011, 16:15

    Wenn ich mir was wünschen darf...
    ...fände ich es toll, wenn HTML 5 und CSS 3 Flash den Garaus machen würde!
    Dieser Blogeintrag zeigt wurderbar, welch Potential in den neuen Technologien steckt. Hoffe die werden sich bald einig, auf das die Standards festgesetzt werden können.


  12. Egon 19 Okt 2011, 10:40

    Mir gefallen die Tutorials auf diesem Blog sehr gut. Ich möchte mir gerne CSS aneignen und bin hier auf sehr schöne Artikel dazu gestoßen. Die Effekte mit dem Border Radius gefallen mir gut. Vorallem die Hover-Effekte machen was her.
    Ich werde noch einen weiteren Blick auf den Code werfen.


  13. Sommer 05 Jan 2014, 11:23

    Das Tutorial ist klasse und der Artikel hat mir auch heute noch weitergeholfen!


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage