Webprogrammierung — 7. Lektion

Schatten

Mit dem Attribut box-shadow oder text-shadow kann man einen „Schatten“ erzeugen (an einer Box bzw. einem Text). Der Wert hat vier Komponenten: die erste beschreibt die horizontale Verschiebung des Schattens gegenüber der zugehörigen Box, die zweite die vertikale Verschiebung, die dritte gibt den Radius des Schattens und die vierte seine Farbe an. Mehrere Schatten werden durch mehrere durch Kommata getrennte Werte angegeben.

Hintergrund-Gestaltung

Neben farblicher Gestaltung sind auch Hintergrund-Bilder möglich. Mit dem Attribut background kann der Hintergrund definiert werden. Der Wert besteht aus den vier Einzelwerten der Attribute background-color, background-image, background-repeat und background-position, wobei die Werte ohne Komma aufgelistet werden und einzelne Werte auch weggelassen werden dürfen.
Attribut background-image: Verwendung wie bei list-style-image
Attribut background-repeat: Werte repeat (Standard, Hintergrund wird mit Bild gekachelt), repeat-x (horizontal kacheln), repeat-y (vertikal kacheln), no-repeat (nicht kacheln, nur ein Bild)
Attribut background-position: Werte top (am oberen Rand mittig), right (am rechten Rand mittig), bottom (am unteren Rand mittig), left (am linken Rand mittig), Paare von diesen Werten für die Ecken und center (horizontal und vertikal mittig) sowie Paare von Längenangaben (erster Wert: Abstand vom linken Rand, zweiter Wert: Abstand vom oberen Rand)
Attribut background-attachment: Werte scroll (Standard, Hintergrund läuft beim Scrollen mit), fixed (Hintergrund bewegt sich nicht beim Scrollen)

Responsive Design

Gestaltung, die auf sich ändernde Umgebungsbedingungen (z.B. beim Verändern der Fenstergröße) reagiert
Durch Definieren verschiedener Stylesheets und Abfragen von Medientypen (Bildschirm, Drucker, Bildschirmleser) und Medieneigenschaften (z.B. Fensterbreite und -höhe; Anzahl der Farben, die das Display darstellen kann; Ausrichtung und Auflösung des Displays; Ausführbarkeit von JavaScript im Browser; u.v.a.) kann der Webauftritt auf unterschiedliche Anzeigegeräte (z.B. große Monitore, Laptops, Tablets, Smartphones) zugeschnitten werden.
Bei Definitionen zu mehreren Medienvarianten in einer Datei, sind alle Angaben für ein Medium in einem Block der Form
@media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Def. }
zusammen zufassen und mehrere solcher Blöcke hinter einander zu setzen.
Existieren mehrere css-Dateien getrennt zu Medienvarianten (ohne @media in den Dateien), so kann die Zuordnung beim Laden der Dateien getroffen werden, indem das Attribut media im <link>-Tag mit dem Wert belegt wird, der auch hinter @media stehen müsste.
Für mediatype ist einer der Werte all (Standard), print, screen oder speech möglich. Beispiele für mediafeature sind width, height (Breite und Höhe des Anzeigefensters), max-width, max-height (obere Schranken für Breite und Höhe des Anzeigefensters), min-width, min-height (untere Schranken für Breite und Höhe des Anzeigefensters), color-index (Anzahl der Farben, die das Display darstellen kann), max-color-index, min-color-index (obere und untere Schranke für die Anzahl der Farben, die das Display darstellen kann), orientation (Ausrichtung der Anzeige, landscape oder portrait), resolution (Auflösung der Anzeige) und scripting (Ausführung von JavaScript erlaubt).