CSS-Spielerei: Runde DIV-Container

Endlich hat sich CSS 3 überwiegend durchgesetzt und wird von den meisten aktuellen Browsern unterstützt. Ein Feature, auf das ich lange gewartet habe, war es, ohne grafische Hilfsmittel Boxen mit abgerundeten Ecken und sogar Kreise zu erstellen, in denen Inhalte dargestellt werden.

Nun geht das endlich. Ein kleines Beispiel hierfür:

Für eine kleine Landig-Page einer Werbekampagne habe ich einige Symbole benötigt, die möglichst plakativ als Aufforderung zum Anklicken wahrgenommen werden sollen. Das Ganze soll so aussehen:

Runde Ecken mit CSS 3 und html 5.

Runde Ecken mit CSS 3 und html 5.

Früher hätte ich dazu einen DIV-Container verwendet, in den ich die entsprechende Grafik eingefügt hätte. Das hätte natürlich funktioniert, aber deutlich mehr Ladezeit benötigt, da jede Grafik das Kreiselement und den Inhalt hätte enthalten müssen.

Nun geht es Dank CSS3 und HTML5 anders und eleganter.

Der Quelltext in der html-Datei ist denkbar einfach:

html-Quellcode

html-Quellcode

Jeder Container wird mit der CSS-Klasse „container“ versehen, die alle die gleichen Eigenschaften zugewiesen bekommen. Innerhalb dieses Containers befindet sich ein weiterer Container, der einen individuellen Unterschied aufweist: Den Inhalt, in diesem Fall das weiße Ikon innerhalb des Kreises. So erhält jeder Container eine eigene ID zugewiesen.

Die Klasse „container“ erhält folgende Formatierung in der CSS-Datei:

CSS-Container

CSS-Container

Die Anweisung „display: inline-block“ sorgt dafür, dass mehrere Container nebeneinander dargestellt werden können und nicht untereinander angeordnet werden.

Dann folgt die „runde Formatierung“ des individuellen Inhalts-Blocks:

Definition des individuellen Inhalt.

Definition des individuellen Inhalts.

Damit die Div-Container rund dargestellt werden, wird die Einstellung „border-radius“ vorgenommen. Für einen Kreis muss der Radius genau der Hälfte von Höhe und Breite des Div-Containers entsprechen. Also bei 150 x 150 Pixeln genau 75 px Radius. Das Bild in der Mitte des so entstandenen Kreises ist ein Hintergrundbild, das über die Anweisung „background-image“ angezeigt wird. Damit es genau in der Mitte des CSS-Kreises steht, wird die Anweisung „background-position: center center“ verwendet. Dadurch wird es vertikal und horizontal zentriert innerhalb des Containers.

So lassen sich mit wenig Aufwand Buttons erstellen, die früher deutlich mehr Grafik erfordert hätten und leichter anpassbar sind, ohne jedes Mal Photoshop & Co zu bemühen.

Schreibe einen Kommentar