CSS - Math Functions: A Beginner's Guide

Hallo da, zukünftige CSS-Zauberer! Heute werden wir eine aufregende Reise in die Welt der CSS-Mathematikfunktionen antreten. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide sein, und wir werden dies Schritt für Schritt angehen. Am Ende dieses Tutorials wirst du erstaunt sein, wie viel du mit nur wenigen mathematischen Tricks in CSS erreichen kannst!

Grundlegende Arithmetikfunktionen

Lassen Sie uns mit den Grundlagen beginnen. CSS bietet uns einige einfache arithmetische Funktionen, die unser Leben beim Gestalten von Webseiten erheblich erleichtern können. Diese Funktionen ermöglichen es uns, Berechnungen direkt in unserem CSS-Code durchzuführen.

Die calc() Funktion

Die calc() Funktion ist das Schweizer Taschenmesser der CSS-Mathematik. Sie ermöglicht es Ihnen, grundlegende arithmetische Operationen direkt in Ihrem CSS durchzuführen. Sehen wir uns ein Beispiel an:

.box {
width: calc(100% - 20px);
}

In diesem Beispiel setzen wir die Breite eines Elements mit der Klasse "box" auf 100% der Breite des Elternteils minus 20 Pixel. Dies ist besonders nützlich, wenn Sie responsive Layouts erstellen möchten, die sich an verschiedene Bildschirmgrößen anpassen.

Lassen Sie uns das aufschlüsseln:

• 100% repräsentiert die volle Breite des Elternteilelements.
• -20px subtrahiert 20 Pixel von dieser Breite.
• Die calc() Funktion führt diese Berechnung für uns durch.

Sie können alle vier grundlegenden arithmetischen Operationen in calc() verwenden: Addition (+), Subtraktion (-), Multiplikation (*) und Division (/). Hier ist ein weiteres Beispiel:

.column {
width: calc(33.33% - 10px);
margin-right: calc(10px * 2);
}

In diesem Fall erstellen wir ein dreispaltiges Layout. Jede Spalte nimmt ein Drittel der Breite (33.33%) minus 10 Pixel für den Abstand ein, und wir fügen einen rechten Rand hinzu, der zweimal so groß ist wie unser Abstand.

Vergleichsfunktionen

Nun, da wir die Grundlagen beherrschen, lassen Sie uns zu einigen Vergleichsfunktionen übergehen. Diese sind großartig für die Erstellung von responsiven Designs, die sich an verschiedene Bedingungen anpassen.

Die min() Funktion

Die min() Funktion gibt den kleinsten Wert einer Liste zurück. Sie ist perfekt, um maximale Grenzen für Elementgrößen festzulegen. Zum Beispiel:

.responsive-text {
font-size: min(5vw, 30px);
}

Dies setzt die Schriftgröße auf 5% der Viewport-Breite, aber niemals größer als 30 Pixel. Es ist eine großartige Möglichkeit, text responsive zu gestalten, ohne dass er auf großen Bildschirmen zu groß wird.

Die max() Funktion

Wie vermutet, tut max() das Gegenteil von min(). Sie gibt den größten Wert einer Liste zurück. Hier ist, wie Sie es möglicherweise verwenden:

.responsive-image {
width: max(300px, 50%);
}

Dies stellt sicher, dass ein Bild immer mindestens 300 Pixel breit ist, auch wenn 50% seines Behälters kleiner als das sind.

Die clamp() Funktion

Die clamp() Funktion ist wie eine Kombination aus min() und max(). Sie nimmt drei Werte: ein Minimum, einen bevorzugten Wert und ein Maximum. Hier ist ein Beispiel:

.responsive-element {
width: clamp(200px, 50%, 500px);
}

Dies setzt die Breite auf 50% des Behälters, stellt jedoch sicher, dass sie niemals kleiner als 200px oder größer als 500px ist.

Fortgeschrittene CSS-Mathematikfunktionen

Nun, da wir die Grundlagen abgedeckt haben, tauchen wir ein in einige fortgeschrittene Funktionen, die Ihre CSS-Fähigkeiten auf das nächste Level heben können.

Die abs() Funktion

Die abs() Funktion gibt den absoluten Wert einer Zahl zurück. Dies kann in Animationen oder wenn Sie sicherstellen möchten, dass ein Wert immer positiv ist, nützlich sein. Hier ist ein Beispiel:

.box {
transform: translateX(abs(var(--x)));
}

Dies würde das Element horizontal basierend auf dem Wert der --x benutzerdefinierten Eigenschaft verschieben, immer in die positive Richtung, unabhängig davon, ob --x positiv oder negativ ist.

Die round() Funktion

Die round() Funktion rundet eine Zahl auf den nächsten ganzen Wert. Dies kann nützlich sein, um Werte an ein Raster zu snapen. Zum Beispiel:

.grid-item {
width: calc(round(100% / 3));
}

Dies würde ein dreispaltiges Layout erstellen, bei dem die Breite jeder Spalte auf den nächsten ganzen Prozentsatz gerundet wird.

Stufige Wertefunktionen

Stufige Wertefunktionen ermöglichen es Ihnen, Werte in diskreten Schritten anstatt glatt zu ändern, was großartig für die Erstellung interessanter visueller Effekte sein kann.

Die mod() Funktion

Die mod() Funktion gibt den Rest nach der Division zurück. Dies kann verwendet werden, um wiederholende Muster zu erstellen. Hier ist ein Beispiel:

.striped-background {
background-color: hsl(0, 0%, mod(var(--i) * 10, 100)%);
}

Dies würde ein gestreiftes Hintergrundmuster erstellen, bei dem die Helligkeit jeder Streife von ihrem Index (--i) abhängt und alle 10 Streifen wiederholt wird.

Trigonometrische Funktionen

Zuletzt, aber nicht minder wichtig, schauen wir uns einige trigonometrische Funktionen an. Diese können äußerst leistungsfähig für die Erstellung komplexer Animationen und Layouts sein.

Die sin() und cos() Funktionen

Die sin() und cos() Funktionen geben die Sine und Kosinus eines Winkels zurück. Diese werden oft in Animationen verwendet. Hier ist ein einfaches Beispiel:

@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}

.orbiting-element {
animation: orbit 5s linear infinite;
}

Dies erstellt eine Orbit-Animation, bei der ein Element in einem Kreis um einen Mittelpunkt bewegt wird.

Funktion Referenz-Tabelle

Hier ist eine schnelle Referenztabelle aller CSS-Mathematikfunktionen, die wir behandelt haben:

Funktion	Beschreibung	Beispiel
calc()	Führt grundlegende Arithmetik durch	calc(100% - 20px)
min()	Gibt den kleinsten Wert zurück	min(5vw, 30px)
max()	Gibt den größten Wert zurück	max(300px, 50%)
clamp()	Clampt einen Wert zwischen Min und Max	clamp(200px, 50%, 500px)
abs()	Gibt den absoluten Wert zurück	abs(var(--x))
round()	Runde auf den nächsten ganzen Wert	round(100% / 3)
mod()	Gibt den Rest nach Division zurück	mod(var(--i) * 10, 100)
sin()	Gibt den Sinus eines Winkels zurück	sin(45deg)
cos()	Gibt den Kosinus eines Winkels zurück	cos(45deg)

Und das war's! Wir haben viel Boden cobered, von grundlegender Arithmetik bis hin zu fortgeschrittenen trigonometrischen Funktionen. Denken Sie daran, der Schlüssel zum Beherrschen dieser Funktionen ist die Übung. Versuchen Sie, sie in Ihr CSS zu integrieren, experimentieren Sie mit verschiedenen Kombinationen, und bald werden Sie atemberaubende, responsive Designs mit Leichtigkeit erstellen. Viel Spaß beim Coden!

Credits: Image by storyset