Farbverlauf (Gradient) im Absatz-Block

Einen Absatz mit optischen Merkmalen hervorheben

In diesem Beispiel zeige ich dir, wie du in WordPress eine zusätzliche CSS-Klasse in einen Absatz einfügst. Die neue Klasse verleiht dem Absatz ein frisches Aussehen und hebt ihn besonders hervor. Da es sich hierbei nur um ein Beispiel handelt, spielt das genaue Design in diesem Fall eine Nebenrolle.

Wie es Aussehen soll

Der erste Buchstabe des Absatzes hebt sich groß und fett von den normalen Buchstaben ab. Eine gelbe Schrift sowie ein gelber Rahmen setzen sich dabei deutlich von einem grünen Hintergrund ab.

Der Absatz selbst erhält eine Hintergrundfarbe, die durch einen dunklen Gradienten (Farbverlauf) verfeinert wird. Ein leichter Schatten umgibt die gesamte Absatz-Box. Zudem wahrt der Text einen definierten Abstand zu den Rändern der Box. Wenn du die Parameter im CSS-Code änderst, siehst du sofort, welche Auswirkungen die einzelnen Werte haben.

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

Trage die entsprechenden Klassen direkt in den Block ein. Falls du mehrere Klassen nutzt, trennst du sie einfach durch ein Leerzeichen. In diesem Beispiel verwenden wir das Wort absatz als Klasse. Dieses Wort tippst du in das Feld „Zusätzliche CSS-Klasse(n)“ in den Block-Einstellungen ein.

Um dorthin zu gelangen, wählst du zuerst den Absatz aus. Das rechte Menü zeigt dir nun den Reiter „Block“ an. Klicke rechts neben „Erweitert“ auf den kleinen Pfeil, damit das Feld „Zusätzliche CSS-Klasse(n)“ erscheint.

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

• WordPress stellt die erste Zeile des Absatzes immer fett dar. Das System behält diese Formatierung auch bei, wenn Nutzer die Seite auf einem schmalen Bildschirm – wie dem eines Smartphones oder Tablets – aufrufen. Der Text bricht je nach Anzeigegerät zwar unterschiedlich um, aber die jeweils erste Zeile bleibt konsequent 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)