Runde Boxen mit CSS und drei Grafiken

Die Darstellung runder Boxen ist ein unerschöpfliches Thema unter den Webdesignern. Ich stelle an dieser Stelle eine Variante vor, bei der die runden Boxen auf drei Grafiken und einem guten Stück CSS basieren.

Die verwendeten Grafiken

Wie schon erwähnt basiert diese Variante der runden Box auf der Verwendung von 3 Grafiken:

  • oben-unten.png
    Bild
    Diese Grafik ist für die Darstellungen der oberen und unteren Begrenzung zuständig. Sie hat eine Abmessung von 50x86 Pixel.
  • ecken.png
    Bild
    Diese kreisförmige Grafik wird bei der Darstellung der vier Ecken verwendet. Sie ist 86x86 Pixel groß.
  • links-rechts.png
    Bild
    Diese Grafik übernimmt die Darstellung des linken und rechten Randes der runden Box. Sie hat eine Größe von 86x50 Pixel.

Alle drei Grafiken sind in ihren äußeren Bereichen zu 100% transparent

Die Herstellung der Grafiken mit dem Grafikprogramm Paint.Net

Die herstellung der Grafiken kann grundsätzlich mit jedem Grafikprogramm erfolgen, dass PNG-Grafiken speichern kann und mit transparenten Ebenen umgehen kann. Ich verwende hierzu in der Regel das kostenlose Grafikprogramm Paint.Net.

ecken.png

  • Neue Grafik mit 86x86 Pixel
  • Vorder- und Hintergrundfarbe wählen
  • Pinselstärke 10
  • Kreis ziehen von 5,5 bis 79,79

oben-unten.png

Neue Grafik mit 86x86 Pixel

Vorder- und Hintergrundfarbe wählen

Pinselstärke 10

Kreis ziehen von 5,5 bis 80,80

zurechtschneiden auf eine Breite von 50 Pixel.

links-rechts.png

Zum Beispiel runde Ecken 1

Ein anderes Beispiel verwendet die gleichen Grafiken, ist aber etwas anders ausgebaut.Zum Beispiel runde Ecken 2

Suche hierzu auch Base64 Konvertierung