Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Mehrfacher Einsatz von Hintergrundgrafiken

Wer geschickt im Spiel mit Hintergrundgrafiken ist, kann damit die Wahrnehmung einer Webseite grundlegend verändern. Nils Pooker zeigt euch deshalb heute die Schattenseiten modernen Webdesigns. Sozusagen.

Hintergrundgrafiken sind bei vielen Webseiten ein wichtiger Bestandteil des Designs. Durch wiederholten Einsatz lassen sich die Gefahren langer Ladezeiten durch zu große oder zu zahlreich verwendete Grafiken vermeiden.

Einsatzgebiete

Hintergrundgrafiken werden eingesetzt, um entweder dem Grundlayout eine Figur-Grund-Beziehung zu geben (z. B. Faux-Columns-Technik oder abgerundete Ecken), bzw. um einzelne Seitenbereiche oder Elemente optisch hervorzuheben.

Mehrfache Verwendung einer Grafik

CSS bietet mit den Werten für das background-Element zahlreiche Möglichkeiten:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Die Syntax background-attachment: fixed; sollte man aus Rücksicht der Browserkompatibilität nur für das body-Element verwenden.

Vorteilhaft bei der gezielten Verwendung ist die Tatsache, dass eine Grafik nicht allein aus sich heraus wahrgenommen wird, sondern immer im Kontext mit der Umgebung. Beispiel: ein Photoshop-Schatten ist lediglich ein Graustufenverlauf. Dieser Verlauf wird in der Wahrnehmung des Betrachters nur dann zu einem Schatten, wenn er an eine Fläche grenzt, die heller oder dunkler ist als der tiefste Tonwert des Graustufenverlaufs. Ist der Flächentonwert identisch, erscheint er wie ein abschließender Verlauf.

Beispiele

Diese einfachen Verläufe (vertikal und horizontal) könnte man mehrfach auf einer Website einsetzen:

Hintergrundgrafik mit background-repeat: repeat-x

Die Beispiele 1 bis 3 zeigen den Graustufenverlauf als Schatten, der per background-position: left bottom und repeat-x dargestellt wird. Hintergrund-Tonwerte bestimmen die Wirkung des Schattens. Beispiel 4 zeigt einen mit der Hintergrundfarbe verbundenen Verlauf. In den Varianten 5 und 6 wird die an die Top-Position platzierte Grafik als sanfter Übergang in die Hintergrundfarbe wahrgenommen, in Beispiel 6 mit einer negativen vertikalen Verschiebung (background-position: 0 -10px;). Man könnte jetzt das Beispiel 4 als Link-Element wählen, der beim Hovern Beispiel 6 anzeigt. Wie sehr zusätzliche Grafikelemente die eigene Wahrnehmung beeinflusst, sieht man an den Ausschnitten rechts: die Beispiele sind identisch, wirken jedoch ohne Rand und Schatteneffekt im direkten Kontext mit dem Hintergrund anders.

Hintergrundgrafik mit background-repeat: repeat-y

Horizontal laufende Grafiken in vertikaler Wiederholung werden oft zur Abgrenzung von Spalten (Layout oder Seitenbereiche) eingesetzt. Diese kann wie in den Varianten 1 und 4 auch unsichtbar sein (Position right in linker, bzw. left in rechter Spalte). Man sieht anhand der Beispiele 4 und 5, dass der Verlauf im Tonwert anders wahrgenommen wird, in Beispiel 4 wirkt er erheblich heller. Im Beispiel 6 wirkt die Abgrenzung weicher, die linke Spalte bekam einen 1-Pixel-Rand mit einem mittleren Grau aus dem Verlaufsbereich. Rechts die Wirkung innerhalb einer einheitlichen Umgebungsfarbe unter Verwendung von border, z. B. für Elemente oder transparente Div-Container vor einer entsprechenden Hintergrundgrafik. Die Linien selbst sind jeweils einfarbig, erscheinen aber wie Verläufe, beeinflusst durch differenzierte Tonwerte innerhalb einer gleichfarbigen Umgebung. Diese wahrnehmungsbezogenen Methoden ermöglichen so interessante Effekte in der Gestaltung von Webseiten.