Runde Navigationselemente ohne Grafiken

Bei webstandard.kulando.de habe ich ein schönes Tutorial entdeckt, mit dem für moderne Browser runde Links – wie beispielsweise Navigationselemente – ohne Grafiken erstellt werden können.

Lediglich beim Internet Explorer (IE) und Opera werden die Links nicht rund, sondern in eckigen Boxen dargestellt. Allerdings wird die avisierte Version 10.5 von Opera auch border-radius unterstützen, so dass dann nur noch der Internet Explorer (IE) nicht in den Genuss der runden Darstellung kommt.

Der Vorteil: Kein aufgeblähter HTML-Code, der durch Grafiken zudem länger lädt, sondern nur ein paar Zeilen CSS-Code und die CSS3-Eigenschaft border-radius sind dafür erforderlich.

Das lesenswerte Tutorial gibt es unter “CSS3 Tutorial – Website-Navigation – Border-Radius“.

2 Kommentare

  1. 1. Webstandard-Team

    Kommentar vom 19. Februar 2010 um 13:34

    Freut mich, wenn das kleine Step-by-Step-Tutorial in Sachen CSS3 gut ankommt. So langsam wird’s auch Zeit, dass einem die Browser keinen Strich mehr durch die mögliche Nutzung von CSS3 machen.

  2. 2. Dieter

    Kommentar vom 19. Februar 2010 um 20:38

    @Webstandard-Team
    Ja, es kommt bei mir sehr gut an und ich freue mich auch schon sehr auf die fast avisierte Fortsetzung. :-)

    Auf Webseiten-Infos.de und dieter-welzel.de setze ich schon CSS3 ein. Jurafernstudium.de soll mit dem in Arbeit befindlichen Relaunch ebenfalls mit CSS3 gestaltet werden. Allerdings hatte ich bisher noch nicht an die Möglichkeit gedacht, dass man mit border-radius nicht nur Ecken von Boxen abrunden, sondern aus einer quadratischen Box sogar einen Kreis machen kann. Schöne Idee!

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben