CSS Funktionen, WordPress, Gutenberg?

Jede Programmiersprache kennt Funktionen. Eine Funktion erwartet einen Wert (Argument) und berechnet auf der Basis dieses Wertes etwas. Nach der Berechnung wird meist ein Ergebnis an das aufrufende Programm zurückgegeben. Also beispielsweise wird ein Wert von 20 (Grad Celsius) an die Funktion übergeben. Innerhalb der Funktion wird gerechnet ((20*9/5)+32) und das Ergebnis von 68 (Grad Fahrenheit) wird zurückgegeben. Solche Funktionen sind oft vordefiniert, damit das Rad nicht jedes mal neu erfunden werden muss und dadurch Fehler vermieden werden. In Programmiersprachen sind Funktionen auch individuell programmierbar.

CSS wird oft als Programmiersprache angesehen und kennt auch Funktionen. Im Unterschied zu anderen Programmiersprachen sind die CSS Funktionen aber nicht individuell programmierbar sondern vorgegeben. Außerdem kann man das Ergebnis von CSS Funktionen sofort im Browser sehen. In diesem Blog Post gebe ich ein paar Beispiele für CSS Funktionen.

Damit die Beispiele einfach nachvollziehbar sind, habe ich ein Zusatzplugin für den Gutenberg Editor installiert: Blocks CSS: CSS Editor for Gutenberg Blocks.

In CSS musst du mittels einem Selektor einen Bereich auswählen und kannst dann einen Befehl mit einer Funktion darauf anwenden. Hier die allgemeine Schreibweise um einem Bereich ein Hintergrundbild zuzuordnen. Die Funktion ist url(), übergeben wird das Argument photo.jpg. Die Funktion gibt das Bild an das Property weiter und im ausgewählten Bereich erscheint das Photo.

.selector{
  // Property - background-image  
  // Function - URL   
  // Argument - photo.jpg
  background-image: url(“photo.jpg”);
}

Ein ganz normaler Absatz

mit ganz normaler Schrift

und einem individuellen Hintergrundbild

(die schwarze Schrift kann man nicht gut lesen :))

Das Blocks CSS Plugin bietet dir zu jedem Block eine Box für dein individuelles CSS an. Im WordPress Backend sieht das obige Beispiel so aus wie im Screenshot.

Aber nun zu den weiteren Funktionen.

Glow Effekt

Diesen Text verziert ein orangefarbener Glow Effekt, die Funktion heisst drop-shadow. Der Code dazu sieht so aus:

selector {
  filter: drop-shadow(0.25rem 0 0.75rem #ef9035);
}

Transform

In CSS lassen sich Bereiche auch drehen und stauchen. Es gibt dafür zahlreiche Funktionen, die aber recht unübersichtlich sind. Im CSS Transform Functions Visualizer kannst du verschiedene Effekte ausprobieren und dann das erzeugte CSS in deinen Block einfügen.

Hier ein Beispiel mit einem verdrehten Photo. Das ist der Code

selector {
    transform: rotate(31deg) perspective(1000px);
    transform-origin: center center;
}

Filter

In CSS gibt es auch Filterfunktionen, hier ein Beispiel für die schwarz-weiss Darstellung.

selector {
  filter: grayscale(1);
}

Ein sechzig-prozentiger Schwarz-Weiss Filter, einfach das Argument auf 60% ändern, also filter: grayscale(60%), würde so aussehen.

Es gibt zahlreiche weitere Filter wie brightness(), blur(), contrast(), invert(), opacity(), saturate(), sepia() um nur ein paar zu nennen.

Verläufe (Gradients)

Verläufe lassen sich sehr einfach erstellen.

Hier der Code für den schwarz-weissen Verlauf im Hintergrund. Als Argumente werden die Richtung (to left oder to right), die Anfangs- und Endfarbe (#000000 und #ffffff ) und die Position, an der die entsprechende Farbe voll dargestellt wird (0% und 100%) definiert.
(Die Drehung habe ich, weil es Spass macht, aus dem oberen Beispiel hinzugefügt.)

… natürlich kann man auch etwas schreiben

selector {
  background: linear-gradient(to left, #000000 0%, #ffffff 100%);
}

selector {
  background: radial-gradient(ellipse at center,  rgba(255,130,0,1) 0%,rgba(249,0,112,1) 100%);
  border-radius: 250px;
  height: 250px;
  width: 250px;
}

Fazit

Alle Beispiele stammen aus dem Complete Guide to CSS-Functions auf der Website css-tricks.com. Kombiniert mit dem Block CSS Plugin in WordPress lassen sich auf einfache Art kreative Gestaltungsmöglichkeiten für einzelne Seiten und Artikel finden.

tl;dr: CSS hat eine durchaus grosse Verführungskraft 😉