skywalk-webdesign.de
skywalk-webdesign.de
Gestaltung mit CSS
Gestaltung mit CSS
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
Diese Grafik ist für die Darstellungen der oberen und unteren Begrenzung zuständig. Sie hat eine Abmessung von 50x86 Pixel. -
ecken.png
Diese kreisförmige Grafik wird bei der Darstellung der vier Ecken verwendet. Sie ist 86x86 Pixel groß. -
links-rechts.png
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
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.