Funktionen

Funktionen sind vordefinierte bzw. spezielle Werte für CSS-Eigenschaften. Die Angabe erfolgt mit dem Namen der Funktion gefolgt von einem runden Klammernpaar. Innerhalb der Klammern können dann, je nach Funktion, ein oder mehrere Parameter angegeben werden, welche mit Kommas getrennt werden. Sie werden jetzt denken, dass Sie solche Funktionen bereits kennengelernt haben, so wie z. B. url, rgba, scale oder rotate. Doch dabei handelt es sich laut Spezifikation nicht um Funktionen, auch wenn diese vom Aufbau identisch sind.

Berechnung

Die Funktion calc() kann dazu genutzt werden, Berechnungen durchzuführen. Die Funktion ist ideal, um relative und absolute Einheiten zu kombinieren. Stellen Sie sich vor, Sie möchten ein Bild auf die volle Browserbreite anzeigen. In diesem Fall würde Ihnen vermutlich die Angabe width: 100%; einfallen. Nun entschließen Sie sich aber, dem Bild einen Abstand von 10px auf allen Seiten zu geben. Nun müssen wir den Wert der Eigenschaft width noch ersetzen, da die Angabe von 100% in diesem Moment nicht mehr stimmt und somit einen Scrollbalken erzeugt. An dieser Stelle kann nun die Funktion calc() eingesetzt werden. Als Parameter wird eine Formel angegeben. Das untere Beispiel zeigt, wie sich das oben genannte Problem lösen lässt:

img
{
	width: calc(100% - (2 * 10px));
	margin: 10px;
}

Attribut

Über die Funktion attr() können wir auf ein Attribut des HTML-Elements zugreifen. Hierfür wird als Parameter der Name des Attributs (ohne Anführungszeichen) angegeben. Genutzt werden kann die Funktion z. B. im Zusammenhang mit der content-Eigenschaft.

a::before
{
	content: attr(title) ": ";
}

Übrigens: Um in CSS zwei Zeichenketten (siehe Beispiel) zu kombinieren, notieren wird nicht (wie in anderen Sprachen) ein Pluszeichen.

Farbverlauf

Einen Farbverlauf in CSS können Sie mittels der Funktionen linear-gradient oder radial-gradient erstellen.

Die Funktion linear-gradient erzeugt einen linearen Farbverlauf und erwartet als Parameter Farbwerte, die für den Farbverlauf genutzt werden sollen. Möchten wir zusätzlich die „Schritte“ (sogenannte color-stops) und somit die Endpositionen eines Farbverlaufs einer einzelnen Farbe festlegen, können wir nach dem Farbwert, gefolgt von einem Leerzeichen, die Stopp-Position mit einer relativen oder absoluten Einheit angeben. Zusätzlich ist noch die Angabe eines Winkels möglich, in welchem der Verlauf angezeigt werden soll. Dieser muss, sofern er verwendet wird, als 1. Parameter übergeben werden.

Mit Hilfe der Funktion radial-gradient ist es möglich, einen kreis- bzw. ellipsenförmigen Farbverlauf zu erzeugen. Als Parameter werden auch hier Farbwerte und ggf. die Stopp-Positionen angegeben. Über einen weiteren (optionalen) Parameter, der als 1. Parameter übergeben werden muss, lässt sich die Größe und Positionierung des Farbverlaufs verändern. Als erstes muss dort die Größe (zuerst Breite, dann Höhe) gefolgt von dem Schlüsselwort at angegeben werden. Nun muss als nächstes noch die Positionierungs-Angabe folgen. Hier wird zuerst wieder die X-Position und anschließend die Y-Position angegeben. Bei den Angaben sind neben relativen Einheiten (wie im Beispiel), auch absolute Einheiten erlaubt.

div
{
	width: 200px;
	height: 200px;
	margin: 10px;
}

#box1
{
	background: linear-gradient(blue, purple, red);
}

#box2
{
	background: linear-gradient(blue 20%, purple 50%, red 80%);
}

#box3
{
	background: linear-gradient(60deg, blue, purple, red);
}

#box4
{
	background: radial-gradient(blue, purple, red);
}

#box5
{
	background: radial-gradient(blue 20%, purple 50%, red 80%);
}

#box6
{
	background: radial-gradient(80% 60% at 60% 80%, blue, purple, red);
}