Trick # 479 | Dieser Beitrag beinhaltet 619 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Vor allem im Responsive-Webdesign stellt uns der CSS-Code ein hilfreiches Utensil zur Seite: Die calc()-Eigenschaft. Werte müssen dabei nicht mehr in Pixel, em oder anderen Einheiten angegeben werden – stattdessen können wir den Code ganz einfach rechnen lassen. Wie’s geht, zeigen wir hier.
Mit der calc()-Eigenschaft können Sie in den Grundrechenarten addieren (+), subtrahieren (-), multiplizieren (*) oder dividieren (/).
Wir machen ein einfaches Beispiel mit einem Balken, den wir zunächst auf 100 % Breite anlegen. Das sieht dann so aus:
Nun möchten wir, dass der Balken zwar 100 % breit ist, bei der Darstellung aber dann doch 150 Pixel abgezwackt werden. Solange man für nur eine Monitorgrösse arbeitet, liesse sich die Prozentzahl ja einfach berchnen; da wir dies im Responsive-Design aber kaum tun, müssen wir den Browser mittels CSS-Code rechnen lassen.
Die Lösung für unser Problem lautet also: 100 % – 150 Pixel. Oder in CSS:
width: calc(100% - 150px)Wichtig sind dabei:
- Vor und nach dem Operatorzeichen muss ein Leerschlag hin.
- Eine Division durch 0 ist nicht zulässig und ergibt entsprechend kein Resultat.
Die obige Breitendefinition width: calc (100% - 150px) ergibt nun folgenden neuen Balken:
Der ist also exakt 150 Pixel schmaler als der obige 100%-Balken.
Sie haben noch weitere Möglichkeiten. Möchten Sie einen Text auf den Kopf stellen (also eine halbe Umdrehung rotieren) lassen und ihn dann zusätzlich bei plus 20 Grad darstellen? Auch das geht. Der CSS-Code heisst dann:
transform: rotate(calc(.5turn + 20deg))So sieht das dann aus:
Lorem ipsum dolor.
Fazit: Die calc()-Eigenschaft ermöglicht zahlreiche neue Möglichkeiten. Besonders im Responsive Webdesign werden Sie sie schätzen lernen.
Weiterführende Infos zur calc()-Eigenschaft finden Sie unter diesem Link.
Werbung
Werbung
