Kommentare 2

Abgerundete Ecken – die besten Methoden im Überblick

Abgerundete Ecken sind eine beliebte Methode, um deinem Webdesign das gewisse Etwas zu verleihen. Wie du ja hier bei Elmastudio sehen kannst, sind wir große Fans von abgerundeten Ecken ;-) Hier meine kleine Übersicht, über verschiedene Möglichkeiten, abgerundete Ecken für dein Web-Layout zu erstellen.

1. neue Möglichkeiten mit CSS3

Die neuen Möglichkeiten von CSS3 werden derzeit unter Webdesignern heiß diskutiert. Die Möglichkeit von abgerundeten Ecken ganz allein mit CSS Styles gehört u.a. zu den neuen Features.

Die Methode ist simpel. Füge deinem div einfach die folgenden CSS Styles hinzu:

.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Diese Methode ist fantastisch simpel und der Code sauber, doch wie könnte es anders sein, hat sie natürlich einen Haken. Leider wird diese Methode nicht von Internet Explorer und älteren Versionen anderer Browser unterstützt.

Wenn die abgerundeten Ecken für dein Design nicht unbedingt notwendig sind, und du mit der Option, ist diese neue Methode aber sicherlich eine tolle Option.

Noch mehr Infos über die neuen Möglichkeiten und Highlight von CSS3 kannst du auch in dem Artikel »11 Classic CSS Techniques Made Simple with CSS3« bei Nettuts nachlesen. Die neusten Infos und Diskussionen rund um das Thema CSS3, findest du außerdem auf der Webseite www.css3.info.

2. abgerundete Ecken mit Javascript

Eine weitere einfach, und vor allem Browser-kompatible Methode, um abgerundete Ecken zu erzeugen, ist die Möglichkeit das Javascript zu verwenden.
Downloade dir dazu einfach die aktuelle Version von Jquery und das Javascript-Plugin Corners, und rufe beides im Head-Bereich deines Codes auf.

Füge dann noch für die entsprechende div-class diese Funktion ein:

<script type="text/javascript"> $(function(){ $('.box').corners('10px'); }); </script>

Diese Methode funktioniert natürlich nur, wenn der Betrachter Javascript zugelassen hat. Ansonsten werden, wie auch bei der CSS3 Methode, normale Ecken angezeigt.

3. abgerundete Ecken mit CSS und Images

Falls du ganz sicher gehen möchtest, dass deine abgerundeten Ecken in allen Browsern (auch älteren Version von IE) angezeigt werden, ist diese Methode wohl derzeit die einzige Option.

Zuerst erstellt du vier Images deiner abgerundeten Ecken mit Photoshop oder Fireworks als Vorlage. Diese Vorlagenbilder setzt du dann als Background-Image in deine CSS Styles ein.

abgerundete Ecken mit CSS

Erstelle eine Bildvorlage deiner vier Ecken in Photoshop.

Der Vorteil, dieser Methode ist, dass du die vorbereiteten Ecken auf verschiedene Flächen mit unterschiedlicher width und height (also Länge und Breite) anwenden kannst.

Bist du sicher, dass du die Ecken nur in einer Größe benötigst, kannst du auch nur zwei Vorlagenbilder (eines für die oberen zwei Ecken, eines für die unteren zwei) erstellen.
Eine ausführliche Beschreibung dieser Methode kannst du dir auch in dem Screencast-Video bei CSS-Tricks anschauen. Chris Colyier erklärt hier alle Methoden, um abgerundete Ecken zu erstellen, noch einmal ganz ausführlich.

Welche Methode verwendest du am liebsten, um abgerundete Ecken in deinem Webdesign darzustellen? Hast du weitere interessante Tipps zum Thema abgerundete Ecken? Dann schreib mit doch einen Kommentar, ich freue mich schon auf dein Feedback.

2 Kommentare

  1. Fireworks CS5 hat eine äußerst nützliche Funktion zum Erstellen von Flächen mit abgerundeten Ecken: Das 9-Slice-Tool. Ein Bild wird in 9 Bereiche unterteilt. So kann man z.B. pngs skalieren, ohne die Eckengröße zu verändern.

    Zusätzlich kann man ein Vektor-Fläche erstellen, deren Rundung man später auch unkompliziert variieren kann. Diese kann man mit Effekten versehen: z.B. Verlauf, Kontur, Schatten, Glühen, Kanten – und ebenfalls später nach Belieben ändern – zudem in einer Stil-Klasse zusammenfassen. Noch einen Text drauf und ein Symbol-Skript erstellt und fertig ist der supermodulare Button für das Weblayout mit abgerundeten Ecken.

    Ohnehin empfehle ich persönlich nicht mit Photoshop fürs Web zu layouten. Ich bevorzuge Fireworks. Da kann man auch alle Seiten anlegen, inklusive Masterpages und verschiedenen Schrift-, Bild- und Symbolklassen. Alles ist pixelgenau. Und mit wenigen Klicks kann man den Look aller Seiten und Unterseiten anpassen (z.B. Fliestext, Überschriften, Farben und Verläufe oder einfach nur die Schattenweichheit). Fireworks hat viele organisatorische Funktionen wie z.B. Indesign – inkl. PDF-Export sowie CSS, HTML Export. So lassen sich Seitenlayouts machen, die einen größeren Umfang haben. Es gibt auch sehr viele Erweiterungen und Specials, wie z.B. Symbole, Raster etc. zum Download. Und einen Klickdummy zu machen ist auch nicht so komplex.

    Also, mir erspart ist mittlerweile sehr viel Zeit und macht auch einen Riesenspaß… Grüße William.

  2. Hallöchen, wie mache ich das mit dem WordPress menü?
    Das Menü soll “runde Ecken” bekommen, ansonsten soll alles so bleiben.

    Das steht zurzeit bei mir: #access {
    background: none repeat scroll 0 0 #000000;
    display: block;
    float: left;
    margin: 0 auto;
    width: 800px;
    }

    Kann man dort etwas hinzufügen?

    Danke,
    Sonja

Schreibe eine Antwort