Webdesign/Licht und Schatten

30min

mittel

Grundkenntnisse in

• Rahmen mit CSS
• Verläufe in CSS

Webseiten bestehen aus einer zweidimensionalen Fläche mit Text und oft auch Grafiken.

Schattierungen, Highlights und Verläufe können räumliche Tiefe und Perspektive erzeugen und die Dimensionen von Objekten betonen. So entsteht ein realistischerer Eindruck, der Nutzern hilft, Seitenstrukturen und interaktive Elemente intuitiv auf den ersten Blick zu erfassen.

Dieses Tutorial richtet sich an Entwickler, die mit den Grundlagen von CSS vertraut sind. Kenntnisse über box-shadow, CSS-Variablen und relative Farbangaben werden vorausgesetzt.

Grundlagen

Das Flat Design ist ein minimalistischer Gestaltungsstil, reduziert auf wenige Linien ohne räumliche Tiefe und Schatten. Allerdings stellte sich heraus, dass die geringe Unterscheidbarkeit der Benutzeroberfläche und ihrer Eingabeelemente Nutzer vor Usability-Probleme stellte, da sie nicht erkennen konnten, welche Fläche interaktiv waren.

Infolgedessen entstand eine ausgewogenere Interpretation von Flat Design: "almost flat" oder "flat 2.0"-Design. Dieser Designstil ist größtenteils flach, verwendet aber subtile Schatten, Highlights und Ebenen, um Tiefe in der Benutzeroberfläche zu erzeugen. Das beste Beispiel für dieses Flat 2.0 ist Googles Material Design, dessen Prinzipien der Physik entlehnt sind. So erzeugen Schatten einen leichten Tiefeneffekt und lassen den Nutzer so sofort erkennen, welche Bereiche wichtige Informationen enthalten.

Räumliche Tiefe

Allerdings ist es mit Photoshop, CSS-box-shadow und SVG heutzutage viel zu einfach Schatten zu erzeugen.

Das Problem dabei: Wenn man jeden Schatten isoliert erstellt, entsteht ein Durcheinander an unpassenden Schatten. Wenn wir die Illusion von Tiefe erzeugen wollen, muss jeder einzelne Schatten zueinander passen. Andernfalls sieht es nur wie ein Haufen unscharfer Ränder aus:

Schatten - bunt durcheinander ansehen …

	<div class="box" style="box-shadow:rgb(0 0 0 / 0.5) 0px 4px 8px;">
	</div>
	<div class="box"  style="box-shadow:rgb(115 77 128 / 0.75) 2px 4px 4px;">
	</div>
	<div class="box" style="box-shadow:rgb(0 0 0 / 0.5) 0px 4px 40px;">
	</div>
	<div class="box"  style="box-shadow:blue -8px 4px 4px;">
	</div>

Grundbegriffe

Schattierungen entstehen durch eine Lichtquelle, die ein Objekt von einer Seite beleuchtet, deren dahinter liegende Teile aber im Schatten liegen.

In der obigen Infografik sind einige wichtige Begriffe hervorgehoben:

Lichtquelle

Wenn du Schatten oder Glanzlichter siehst, muss es eine Lichtquelle geben. Das klingt selbstverständlich, aber in den meisten Designprojekten (außer Illustrationen, die eine Sonne, einen Mond, eine Lampe usw. enthalten) ist diese Lichtquelle nicht sichtbar.
Wenn Schatteneffekte aber alle von derselben Lichtquelle verursacht zu sein scheinen, erhält man ein realistischeres, einheitlicheres Erscheinungsbild – anstatt nur einige zufällig angewendete Spezialeffekte.

Glanzlicht

Dies ist die Stelle, an der das Licht am hellsten auf ein Objekt scheint (am nächsten zur Lichtquelle und dieser zugewandt).

Schatten/Kernschatten

Dies ist der dunkelste Teil des Objekts (am weitesten von der Lichtquelle entfernt). Schatten sind jedoch nicht alle ein einziger dunkler Farbfleck, sondern variieren in ihrer Schattierung. Der tiefste Teil eines Schattens, an dem das Objekt vollständig von der Lichtquelle abgewandt ist, wird als Kernschatten bezeichnet.

Wurf- oder Schlagschatten

Im Gegensatz zum Kernschatten (der sich auf dem Objekt befindet) wird dieser vom Objekt erzeugt. Dort, wo das Objekt selbst die Lichtquelle blockiert, wirft es einen Schatten auf die Oberfläche, auf der es steht. Schlagschatten zeigen in die gleiche Richtung wie die Lichtquelle, nur auf der gegenüberliegenden Seite des Objekts.

Schatten in CSS

In CSS gibt es verschiedene Wege, Schatten und Schattierungen zu realisieren:

Licht: Quelle und Beleuchtung

In der natürlichen Welt werden Schatten von einer Lichtquelle geworfen. Die Richtung des Schattens hängt von der Position der Lichtquelle ab:

Lichtquelle und Schatten ansehen …

div {
	background: white; 
	color: black; 
	width: 5em;
	aspect-ratio: 1;
	--xOffset: 0;
	--yOffset: 0;	
 	--shadow-blur: 1em;
	--shadow-color: rgb(50 50 50 /0.5);
	box-shadow: var(--xOffset) var(--yOffset) var(--shadow-blur) var(--shadow-color);
}

Zieh die Sonne mit der Maus über den Viewport. Das div mit der Klasse .box wirft einen Schatten.

Im Allgemeinen sollten wir uns für eine einzige Lichtquelle für alle Elemente auf der Seite entscheiden. Diese Lichtquelle befindet sich in der Regel oberhalb und leicht links davon.

Wenn CSS ein echtes Beleuchtungssystem hätte, würden wir eine Position für eine oder mehrere Lichtquellen festlegen. Leider gibt es so etwas in CSS nicht. Stattdessen verschieben wir den Schatten, indem wir einen horizontalen und einen vertikalen Versatz angeben. Im obigen Bild zum Beispiel hat der resultierende Schatten einen vertikalen Versatz von 4 Pixel und einen horizontalen Versatz von 2 Pixel.

Hier ist der erste Trick für kohärente Schatten: Jeder Schatten auf der Seite sollte das gleiche Verhältnis haben. Dadurch wird der Eindruck erweckt, dass jedes Element von der gleichen Lichtquelle beleuchtet wird.

Müsste nicht jedes Element sein eigenes Verhältnis haben, da jedes Element eine eigene Position in Bezug auf die Lichtquelle hat?

Das stimmt, wenn die Lichtquelle in der Nähe ist, wie bei Menschen, die sich um ein Lagerfeuer versammeln. Wenn die Lichtquelle jedoch weit entfernt ist, wie die Sonne, sind diese Unterschiede vernachlässigbar. Alles wirft einen Schatten im gleichen Winkel.

Aus praktischen Gründen erhalten alle Schatten den gleichen Winkel, da es zu mühsam ist, für jedes Element einen eigenen Winkel zu berechnen.

Farbige Schatten

Schatten sind in der Regel transparente, schwarze Unschärfen. Wenn sie auf eine hell gefärbte Oberfläche geworfen werden, können solche Schatten wie schmutzige Flecken aussehen.

Der Grund dafür: Im UI-Design betrachten wir Schatten normalerweise als eine Eigenschaft des Elements, das ihn wirft. In Wirklichkeit werden Schatten (oder Lichterglanz) durch mehrere Faktoren definiert:

• Die Lichtquellen und ihre Positionierung, Form und Helligkeit. Diese bestimmen den Kontrast zwischen Schatten und ihrer Umgebung – die Dunkelheit des Schattens.
• Das Objekt, das die Lichtquelle blockiert und so die Form des Schattens erzeugt.
• Der Abstand zwischen dem Objekt und der Oberfläche, der zusammen mit der Form der Lichtquelle die Konturhärte des Schattens definiert – wie unscharf er aussieht.
• Die Oberfläche, auf die der Schatten geworfen wird und die die Farbe des Schattens definiert.

Wir rendern Schatten so, als gäbe es nur Umgebungslicht und eine einzige weit entfernte diffuse Lichtquelle. Diese Lichtquelle befindet sich normalerweise oben links oder oben in der Mitte.

Bisher hatten wir schon einige Beispiele, in denen mit der box-shadow-Eigenschaft gearbeitet wurde. In diesem Beispiel verwenden wir den Farbton des Hintergrunds und färben mit Relativen Farbangaben den Schatten.

Schatten sind dunkel – aber nicht schwarz! ansehen …

aside {
  color:            var(--tone);
  background-color: oklch(from var(--tone) calc(l + 45) calc(c * 0.5) h);
  box-shadow:       0.3em 0.6em 1em 
                    color-mix(in oklch, var(--tone) 90%, black 10%);;
}

.info {
	--tone: var(--color-primary);
}

.warning {
	--tone: var(--color-secondary);
}
.success {
	--tone: var(--color-tertiary);
}

drop-shadow()

Alkternativ zum oben erwähnten box-shadow gibt es noch den aus der SVG-Welt übernommenen drop-shadow(). Diese CSS-Funktion erzeugt einen Schlagschatten, der sich nicht nur um Boxen, sondern auch um unregelmäßige Umrisse legt:

Empfehlung: Setze Schattierungen nur sparsam und gezielt ein.
Schatten sollten stets …

• nur in eine Richtung zeigen
• nicht zu scharf konturiert sein
• so unauffällig sein, dass man sie nicht bewusst sieht, sondern dass sie nur wirken.

Überflug mit Schatten ansehen …

  body {
    background: url('https://wiki-test.selfhtml.org/images/4/4b/Landscape-1.svg') repeat-x;
    background-size: cover; /* or "contain" depending on your SVG */
    animation: scroll-bg 20s linear infinite;
  }

  @keyframes scroll-bg {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -2000px 0; /* depends on SVG width */
    }
  }

Verläufe

(Farb-)Verläufe sind sowohl Helligkeits- (Tonwert-) als auch Farbabstufungen, die entweder linear über das gesamte Objekt oder radial von einem Mittelpunkt ausgehen.

Objekten Plastizität und damit räumliche Tiefe geben. In den meisten Fällen werden Verläufe verwendet, um eine Lichtquelle entweder in einem radialen oder linearen Format zu imitieren.

Das menschliche Auge wird unwillkürlich zum Mittelpunkt eines radialen Verlaufs gezogen. Dies kann auf wichtige Inhalte fokussieren, genauso aber auch vom Wesentlichen ablenken.

Beispiele mehrerer Farbverläufe

Dabei sollten Verläufe – genau wie Schatten – so subtil eingesetzt werden, dass man sie bemerkt, sie aber nicht groß auffallen.

Empfehlung:
Setze Verläufe nur sparsam und gezielt ein!
Achte dabei aber harmonische und dezente Verläufe zwischen zwei sehr sehr ähnlichen Farbwerten.

• Magisches Papier: Layout und Tiefe im Webdesign (pixlscript.de)

Siehe auch

• 

  Licht und Schatten in SVG

  Bevor es CSS gab, konnte SVG bereits mehr!

   
• Benutzerfreundlichkeit

  (usability)

   
• Fertige Layouts

  10 Beispiel-Webseiten, die valides HTML mit modernem CSS verbinden.