Farbverlauf (Gradient) im Absatz-Block
Einen Absatz mit optischen Merkmalen hervor heben
In diesem Beispiel möchte ich zeigen, wie in WordPress eine zusätzliche CSS-Klasse in einen Absatz hinzugefügt werden kann. Die neue Klasse soll dem Absatz ein neues Aussehen verleihen, um ihn besonders hervorzuheben. Es soll hier nur ein Beispiel sein. Das Aussehen ist für diesen Fall nur Nebensache.
Wie es Aussehen soll
Der erste Buchstabe des Absatzes soll größer als die normalen Buchstaben sein, ebenfalls soll er fetter aussehen und die gelbe Schrift, sowie der gelbe Rahmen soll auf grünem Hintergrund zu sehen sein. Der Hintergrund des Absatzes soll eine Farbe haben und mit einem dunklen Gradienten (Farbverlauf) versehen sein. Die ganze Absatz-Box soll mit einem leichten Schatten umgeben sein. Der Text soll in einem bestimmten Abstand zu den Rändern der Box liegen.
Durch ändern der Parameter im CSS-Code, kann schnell heraus gefunden werden, welche Auswirkung die einzelnen Parameter verursachen.
Der CSS-Code – Cascading Style Sheets
Der notwendige CSS-Code wird in die style.css oder wie sie bei Dir auch heißt, eingeschrieben. Damit der Code nicht beim nächsten Update überschrieben wird, trägst Du ihn am besten in die style.css des child themes ein.
Block Erweiterungen
Im Block müssen die entsprechenden Klassen eingetragen werden. Sind mehrere Klassen vorhanden, werden sie durch ein Leerzeichen getrennt eingetragen. Als Klasse in diesem Beispiel ist es das Wort: absatz, Dieses wird in das Feld „Zusätzliche CSS-Klasse(n)“ der Block-Einstellungen eingetragen.
Um dahin zu kommen wird der Absatz ausgewählt. Im rechten Menü sollte der Block unterzeichnet sein. Rechts neben „Erweitert“ auf den Pfeil klicken, dann wird auch das Feld der „Zusätzliche CSS-Klasse(n)“ sichtbar.
Der erste Buchstabe
- Der erste Buchstabe im Absatz soll größer, als die normalen Buchstaben sein. Ebenfalls soll er fetter aussehen und die gelbe Schrift, sowie der gelbe Rahmen soll auf grünem Hintergrund zu sehen sein.
- Dann sollte der Buchstabe nicht am folgenden Text liegen, sondern mit einem kleinen Abstand.
- Die Ecken des Rahmens sollen leicht abgerundet sein.
/* Der erste Buchstabe */
.absatz::first-letter {
color: yellow;
font-size: 4em;
font-weight: 700 ;
background-color: green;
padding: 0.2em;
margin-right: 0.3em;
border: 2px solid;
border-radius: 5px;
float: left;
}
CSS-Code für den ersten Buchstaben
Die erste Zeile
- Die erste Zeile des Absatzes soll immer Fett dargestellt werden. Die Zeile wird auch in Fett angezeigt, wenn die Seite z.B. auf einem Smartphone oder Tablet angezeigt wird und dadurch die Seitenbreite sehr schmal ist. Sie verändert sich je nach Anzeigegerät und bleibt immer in der ersten Zeile Fett.
/* Die erste Zeile */
.absatz::first-line {
font-weight: 700;
}
CSS-Code für die erste Zeile
Die Absatz-Box
- Der Absatz soll eingefärbt sein und mit einem dunklen Farbverlauf (Gradienten) unterlegt werden.
- Der Text innerhalb der Absatz-Box soll nicht bis an den Rand gehen.
- Die ganze Absatz-Box soll einen leichten Schatten bekommen.
/* Die Absatz-Box mit dunklem Gradient und Hintergrundfarbe */
.absatz {
background-color: comsilk;
background-image: var(--gradient-dunkel);
box-shadow: 0 0 3em rgba(0,0,0,.15);
padding: 1.5em;
}
CSS-Code für den Absatz (Paragraph)
Die Gradienten
In diesem Beispiel stehen zwei Gradienten zur Verfügung. Erklärungen zu den Farbverläufen (Gradienten) kannst Du hier finden:
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Images/Using_CSS_gradients
:root {
--gradient-hell: linear-gradient(145deg, rgba(255,255,255,0), rgba(255,255,255,.25));
--gradient-dunkel: linear-gradient(145deg, rgba(0,0,0,0), rgba(0,0,0,.25));
}
CSS-Code für den Farbverlauf (Gradient)