Boxen mit runden Ecken

Wie Sie Boxen mit runden Ecken erstellen. Und zwar mit nur einer einzigen Grafik

3
(2)
Kommentar schreiben
Stand: 26. Januar 2009

Grafik erzeugen

Webseiten bestehen aus rechteckigen Kästchen, die im Browserfenster übereinander, nebeneinander und ineinander gestapelt werden. Alles Runde ist entweder Trick, Grafik oder beides. CSS-Experte Peter Müller zeigt Ihnen den Trick mit der Grafik.

Möglichkeiten, eine Box mit runden Ecken zu erstellen, gibt es wahrscheinlich genauso viele wie Wege nach Rom. Die hier vorgestellte Technik hat den Vorteil, dass sie nur eine einzige Grafik benötigt und vergleichsweise einfach umzusetzen ist.

Beispieldateien

Zum Üben und Selbermachen stehen Beispieldateien bereit. Das zip-Archiv enthält zwei Ordner: In "basis" finden Sie die Übungsdateien, mit denen Sie unmittelbar anfangen können zu arbeiten. Dem Ordner "fertig" entnehmen Sie, wie das Ganze am Ende aussehen sollte. Download Beispieldateien (.zip, 11 KB)

Eine Grafik mit runden Ecken

Zum Warmwerden möchte ich Ihnen zunächst zeigen, wie Sie schnell einzelne Grafiken mit runden Ecken erstellen können. Sie können die benötigte Grafik natürlich auch gerne in einem Bildbearbeitungsprogramm wie Photoshop Elements erstellen. Nichtgrafiker hingegen können sie ganz einfach auf RoundedCornr.com online erstellen.

Auf der Site können Sie Runde-Ecken-Komplettpakete generieren lassen, inklusive HTML und CSS-Quelltext, den Sie nur noch kopieren und in Ihre Seiten einfügen müssen, aber für die Übungen in diesem Beitrag benötigen Sie nur eine Grafik. Das HTML und CSS dazu schreiben Sie selbst.

Die Option zum Erstellen der Einzelgrafiken befindet sich weit unten auf der Startseite, unter der Überschrift "Single RoundedCornr Image":

roundedcornr.com - Grafiken mit runden Ecken online erstellen

In diesem Dialogfeld können Sie Rahmenlinien, Farbverlauf und Text eingeben. Für den Anfang soll es eine ganz schlichte Grafik sein. Machen Sie die Grafik relativ hoch (ca. 600px sind ein guter Anfang), damit beim Zoomen im Browser noch genügend Reserve bleibt. Die in der Abbildung dargestellten Optionen ergeben eine 100 px hohe und 600 px breite GIF-Grafik in #b3c4e5 (hellblau) mit vier runden Ecken, die einen Radius von 10 px haben.

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Kreisausschnitte als runde Ecken wirken sehr unschön, da der Mensch daran gewöhnt ist, das Geraden nie übergangslos in Kreise übergehen. Es ist deshalb vorteilhaft, solche Rundungen mit hyperbolischen Rundungen zu gestalten (ähnlich wie bei den alten Röhrenfernsehgeräten). Der Konstruktionsaufwand ist zwar etwas höher, aber das ästhetische Ergebnis wirkt einfach viel besser.

Inhalt

Downloads zu diesem Beitrag

Über den Autor:

bild117259

Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und veröffentlichte zahlreiche Bücher rund um das Thema Webpublishing. Seine Erklärungen sind nicht ausschließlich für E ...

Newsletter abonnieren