Farben & Schatten
Die Alchemie des Leuchtens und Verdunkelns
In diesen Zeilen lernst du, wie du mit CSS Farben und Schatten so meisterst, dass selbst ein erfahrener Magier staunen würde. Deine Texte leuchten in der Dunkelheit, während die Hintergrundfarben wie magische Nebel um sie herumwirbeln und deine Geschichten ins rechte Licht rücken. Und die Schatten? Sie geben deinen Boxen Tiefe, als würden sie geheimnisvoll aus den Seiten heraustreten und dem Leser eine verschwörerische Botschaft zuflüstern.
Doch sei gewarnt: Farben und Schatten sind wie magische Tränke. Ein Tropfen zu viel, und plötzlich sieht deine Seite aus wie ein experimenteller Zaubertrank, der außer Kontrolle geraten ist. Gestalte weise, und deine Seite wird strahlen wie ein leuchtender Stern am CSS-Himmel.
Farben & Effekte
Licht, Schatten, Kontraste – mach deine Elemente lebendig!
Textfarbe
Die Palette des Künstlers
Wie ein Alchemist, der mit Farben arbeitet, lässt die Textfarbe deine Worte lebendig werden. Ein feuriges Rot entfacht Leidenschaft und ein sanftes Grün haucht dem Text die Frische eines Waldes ein.
h1 {
color: red;
}color: Diese Eigenschaft weißt Texten eine Farbe zu.
Hintergrundfarbe
Die Bühne für den großen Auftritt
Vorhang auf! Die Hintergrundfarbe schafft die perfekte Szenerie für den großen Auftritt deiner Texte. Mit einem kleinen CSS-Zauber legst du den Teppich aus Farben, auf dem deine Inhalte strahlen.
h1 {
background-color: green;
}background-color: Diese Eigenschaft weißt deinem Textblock eine Hintergrundfarbe zu.
Textschatten
Der dramatische Auftritt
Ein gut gesetzter Textschatten ist wie ein geheimnisvoller Nebel um deine Worte. Er lässt sie plastisch wirken und verleiht Dramatik, selbst auf den chaotischsten Hintergründen.
h1 {
text-shadow: 2px 2px 5px grey
}text-shadow besteht aus: horizontale und vertikale Verschiebung, eine Unschärfe sowie einer Farbe.
Boxschatten
Die Magie des Schwebens
Mit box-shadow schwebt dein Element plötzlich wie von Zauberhand über der Seite. Ein Schatten hier, ein Hauch Licht dort, und schon hebt sich deine Box hervor, als würde sie im Rampenlicht stehen, bereit, ihren großen Auftritt zu genießen.
h1 {
box-shadow: 4px 4px 9px black;
}Hier hat die Box einen Schatten mit 4 Pixeln horizontaler und vertikaler Verschiebung, 9 Pixeln Unschärfe und einer schwarzen Farbe für den Schatten
In dieser Lektion hast du gelernt…
- Wie du mit
colordie Textfarbe bestimmst, um Inhalte hervorzuheben und Stimmungen zu erzeugen. - Warum
background-colordie Bühne für deine Texte schafft, indem sie Kontraste verstärkt und Lesbarkeit verbessert. - Wie du mit
text-shadowdramatische Effekte erzeugst, um Text plastischer und lebendiger wirken zu lassen. - Warum
box-shadowElemente hervorhebt, indem es sie optisch vom Hintergrund abhebt und eine Tiefenwirkung erzeugt
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Farbmagie des Waldes
Wenn der Herbst die Bäume von Greenwood Hollow in ein Kaleidoskop aus Farben taucht, ist es, als ob der Wald seine alten Geheimnisse flüsternd erzählt. Um diese magische Kunst zu meistern, musst du lernen, wie du Farben und Schatten in Texten und Boxen einsetzt. Mit CSS kannst du die Worte der Ältesten zum Strahlen bringen – und vielleicht sogar den Schatten lebendig wirken lassen, falls du es richtig machst.
Deine Aufgabe: Die Gestaltung der Runenschrift
- Textfarbe (color):
Setze für die Überschrift (<h1>) und die Absätze (<p>) eine passende Textfarbe wie forestgreen oder darkslategray. - Hintergrundfarbe (background-color):
Füge der .magic-box-Klasse eine Hintergrundfarbe wie lightgoldenrodyellow hinzu. - Textschatten (text-shadow):
Verwende für das <h1>-Element einen Textschatten (text-shadow), z.B. 2px 2px 4px rgba(0, 0, 0, 0.5). - Boxschatten (box-shadow):
Setze für die .magic-box-Klasse einen Boxschatten (box-shadow): 5px 5px 10px rgba(0, 0, 0, 0.3).
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
body {
color: darkslategray;
}
h1 {
color: forestgreen;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.magic-box {
background-color: lightgoldenrodyellow;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}