Colorscheme

Runde Ecken ohne Grafiken in Css erstellen

Ja es geht, man kann runde Ecken erzeugen ohne die Befehle der Gecko-Engine zu benutzen und diese runden Ecken funktionieren in allen Browsern. Hinzu kommt das man sogar noch mehrere Formen realisieren kann, als mit dem rounded corner Befehl überhaupt möglich wäre.

Der Trick funktioniert folgendermaßen:

Man erzeugt eine Box und über und unter dieser werden weitere Boxen erzeugt, allerdings mit der festen Höhe von einem Pixel (je nach gewünschten Effekt können es auch mehr Pixel sein). Die zusätzlichen Boxen sind in der Breite aber immer etwas kleiner als die Hauptbox und somit werden “Treppenstufen” erzeugt die bei bloßer Betrachtung als Rundung zu erkennen sind. Hier ein kleines Bild dazu:

Box mit runden Ecken die ohne grafiken erzeugt wurden nur mit Css

(Leider ist es nicht sonderlich gut zu erkennen)

Der Code zu dieser und anderen Boxen mit runden Ecken ohne Grafiken findet ihr auf webbe.de. Viel Spass beim ausprobieren!

Wem das Ergebnis nicht gefällt, der kann wieder auf Grafiken als Ecken zurückgreifen, ein komfortables Onlinetool gibt es auf neuroticweb.com zu finden.

Linktipp: Erlerne das 10 Fingersystem, kostenlos!

Verwandte Artikel
  1. Webdesigner setzen auf rund – Warum werden runde Ecken als angenehm empfunden
  2. HowTo: Suchmaschinen Optimierung – Schritt 5 – Links und Grafiken richtig ausgeben
  3. Favicon erstellen – Erhöhung des Corporate Designs
  4. 20 CSS Tipps und Tricks
  5. Schneller mit Css arbeiten – ein kleiner Trick

am Dezember 22, 2005 um 13:20 Uhr | in Allgemein | 4 Kommentare

2 Trackbacks/Pingbacks
  1. Pingback: Webmasterfind Blog CSS: runde Ecken ohne Bilder on Januar 31, 2006
  2. Pingback: Geschlossen - Umsetzung einer Grafik in HTML - Freesoft-Board on Dezember 11, 2007

2 Kommentare
  1. Daniel, August 20, 2008:

    Hi Christian,

    Ich finde diese Methode ziemlich umständlich, vor allem wenn du aufwendige Verläufe in den Ecken verwendest. Ich hab zu dem Thema auch ein paar Beispiele verfasst. Schau doch mal vorbei und lese mein Artikel zum Thema Runde Ecken

  2. B.Turan, April 8, 2009:

    hi,

    Daniel hat recht das Verfahren für den Effekt viel zu umständlich. Aug Grafiken kann man sich immer noch verlassen….

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.