Responsive CSS Circles
Responsive Webdesign mit prozentualen Breiten, Media-Queries oder Flexbox-Layouts ist inzwischen Gang und Gäbe - manch komplexere Interface- und Designelemente an flexible Breiten anzupassen ist jedoch immer noch häufig eine Herausforderung. Hier ein Beispiel für Inhaltselemente, die ein festes Seitenverhältnis waren.
Jahrzehnte bestand das Internet fast ausschließlich aus rechteckigen Formen. Dank CSS3 ist damit seit einigen Jahren Schluss - Regeln wie border-radius
und transform
ermöglichen schier endlosen Gestaltungsspielraum, ohne Megabyteweise Grafiken nachladen zu müssen.
Ein div
zu einem Kreis zu machen geht z.B. ganz einfach:
div.circle {
width: 100px;
height: 100px;
background-color: cyan;
border-radius: 50px;
}
Wenn die exakte Größe des Elements bekannt ist, ist hiermit schon alles erledigt. Im Zeitalter zahlloser Mobilgeräte genießen wir diesen Luxus jedoch in der Regel nicht - unterschiedliche Devicebreiten lassen uns mit solch statischen Zahlen schnell an unsere Grenzen stoßen.
Schritt 1: border-radius
in % angeben
Die CSS-Regel border-radius
unterstützt wie die meisten CSS-Regeln auch eine %-Angabe.
div.circle {
width: 100%;
height: 100px;
background-color: cyan;
border-radius: 50%;
}
Wenn wir darüber hinaus width
auf 100% setzen, ist unser Kreis direkt "responsive" - oder auch nicht. was wir zu Gesicht bekommen ist lediglich ein hässliches Oval. Wir müssen unserem Element noch beibringen, dass dessen Höhe immer dessen Breite entsprechen soll.
Schritt 2: Elternelement mit festem Seitenverhältnis
Wir müssen nun zuerst unser HTML-Markup etwas anpassen:
<div class="column">
<div class="circle-outer">
<div class="circle">
...
</div>
</div>
</div>
Das div.column
dient nur der Veranschaulichung eines die Breite vorgebenden Elternelements. Sollten hier weitere Abstände benötigt werden, ist es wichtig, dass diese auf dem Parent definiert werden, und nicht auf div.circle-outer
- sonst funktioniert unser Trick nicht korrekt.
Wir fügen nun folgendes CSS hinzu:
div.circle-outer {
width: 100%;
padding-bottom: 100%;
position: relative;
}
Wir machen uns dabei zu nutze, dass das Bezugssystem für die Größenberechnung auch bei vertikalen Paddings die Breite des Elements ist. Das Element hat nun eine Innenhöhe von 0 und eine Außenhöhe, die exakt der Breite des Elements entspricht.
Schritt 3: Absolut positionierter Kreis im Elternelement
Um nun unseren Kreis korrekt anzuzeigen, ändern wir dessen CSS folgendermaßen ab:
div.circle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: cyan;
border-radius: 50%;
}
Et voilà - wir haben einen perfekt responsiven Kreis erstellt. Warum? Bei absoluter Positionierung ist das Bezugssystem nicht die Innengröße des entsprechenden Elternelements, sondern die Außengröße, also inklusive Padding.
Diese Technik in Action als jsfiddle
Andere Anwendungsfälle
Diese Technik kann für alle Container angewendet werden, deren Seitenverhältnis fix definiert ist, also z.B. auch beim Einbinden von Videos als iframe - es muss leidglich die richtige Prozentzahl für das padding-bottom
errechnet werden - für ein Video im 16:9-Format wären dies 56.25%.
Populäres Beispiel sind z.B. die .embed-responsive
Klassen des Frontendframeworks Bootstrap.