∷ Programmierung ∷ Webdesign
Im Folgenden sind Quellcode-Schnipsel zu finden, die sich im Design einer Webseite verwenden lassen.
Einige Anweisungszeilen setzen HTML5 oder Cascaded Style Sheets (CSS) in der Version 3 voraus und haben somit in veralteten Browsern keine Wirkung.
① Responsives Webdesign (Responsive Web Design)
Heutzutage gibt es Computer mit verschiedensten Bildschirmgrößen.
Dies stellt besondere Anforderungen an eine Homepage, denen man mit Responsive Web Design
, welches auf die Bedürfnisse der Geräte reagiert, begegnen kann.
Als Beispiel kann diese Webseite herhalten: Verändert man die Maße des Browser-Fensters, dann verschiebt sich die Aufteilung und variiert das Layout; zudem ist die Darstellung auf einem Ausdruck etwas anders als auf dem Display.
Bewirkt wird dies durch Medienabfragen mittels CSS und damit verknüpfte spezifische Stylesheets, aber auch durch automatisch fließende HTML-Elemente und den Verzicht auf einen starren – beispielsweise auf <table>-Blöcken und festen Weiten basierenden – Unterbau.
Gerätebedingte Verzweigungen sind sowohl im HTML- als auch CSS-Code möglich. Mit den nachfolgenden Code-Schnipseln kann erreicht werden, dass in Abhängigkeit vom Ausgabemedium oder von der Breite des Browser-Fensters unterschiedliche CSS-Regelsätze gelten oder Stylesheets geladen werden:
@media screen and (max-width: 480px) { .elem { width: 100%; /* 1-spaltig */ } }@media screen and (max-width: 640px) and (min-width: 481px) { .elem { width: 50%; /* 2-spaltig */ } }@media screen and (max-width: 1024px) and (min-width: 641px) { .elem { width: 33.3%; /* 3-spaltig */ } }@media screen and (min-width: 1025px) { .elem { width: 25%; /* 4-spaltig */ } }@media print { nav, #footer { display: none; } }
<link rel="stylesheet" type="text/css" media="(max-width: 640px)" href="small.css"><link rel="stylesheet" type="text/css" media="(min-width: 641px)" href="wide.css"><link rel="stylesheet" type="text/css" media="print" href="print.css">
Bewegliche und sich innerhalb eines umgebenden Containers selbständig anordnende Objekte lassen sich mittels des nachfolgenden Konstrukts implementieren. Anwendungsfälle hierfür sind u. a. Bildergalerien sowie Link- oder Button-Leisten.
Beispiel: floating.html
.container { text-align: center; }.elem { display: inline-block; }
<div class="container"><div class="elem">Element 1</div><div class="elem">Element 2</div><div class="elem">Element 3</div><div class="elem">Element 4</div><div class="elem">Element 5</div><div class="elem">Element 6</div></div>
Grafiken sollten verkleinert angezeigt werden dürfen, wenn dies die gerade vorliegende Fensterbreite erfordert:
img { max-width: 100%; height: auto; }
Eine der wichtigsten Angaben im Kopf eines HTML-Dokuments (oder alternativ in einer CSS-Datei) ist das viewport-Element.
Mit ihm kann dem Browser mitgeteilt werden, dass die Seite für das Zielgerät ausgelegt ist und keine Skalierung benötigt, sondern 1:1 auf diesem dargestellt werden kann:
@viewport { width: device-width; zoom: 1; }
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1">…
② Hintergrundleuchten
Mit der CCS3-Eigenschaft text-shadow kann ein Schattenwurf realisiert werden.
Durch eine mittige Platzierung des Schattens und der Verwendung einer kräftigen, hellen Farbe lässt sich aber auch ein Hintergrundleuchten bewirken, mittels dessen sogar dunkler Text auf dunklem Grund lesbar wird.
Die multiple Anwendung der Parameter dient der Verstärkung des Effekts.
Beispiel: backlight.html
.backlight-yellow { text-shadow: 0 0 .2em yellow, 0 0 .4em yellow, 0 0 .6em yellow; }.backlight-beige { text-shadow: .2em .2em .2em beige, -.2em -.2em .2em beige; }.backlight-green { text-shadow: 0 0 .2em lawngreen, 0 0 .2em lawngreen; }.backlight-blue { text-shadow: 0 0 .2em deepskyblue, 0 0 .2em deepskyblue; }.backlight-red { text-shadow: 0 0 .2em orangered, 0 0 .2em orangered; }
<span class="backlight-yellow">Bienenhonig</span> <span class="backlight-beige">Mondschein</span> <span class="backlight-red">[ Achtung ]</span> <span class="backlight-green">Hinweis</span><span class="backlight-blue"><u>Link</u></span>
③ Farbverläufe (Gradients)
Farben sind wichtig, und durch Verläufe wirken sie noch ein wenig lebendiger.
Dafür bietet CSS3 sogenannte Gradienten.
In der einfachsten Form gibt es jeweils eine Start- und Zielfarbe sowie eine Richtung, wobei der Übergang über die gesamte Breite des einzufärbenden Objekts geht:
background: linear-gradient(to right, #FFFF00, #0000FF);
Man kann die Farbliste beliebig verlängern; in diesem Fall wird die verfügbare Fläche gleichmäßig aufgeteilt und für jedes benachbarte Farbpaar ein Verlauf geschaffen:
background: linear-gradient(to right, blue, green, yellow, red, purple);
Der Bereich, innerhalb dessen ein Übergang geschehen soll, lässt sich beschränken.
Im nachfolgenden Beispiel liegt er gerade mal zwischen den Positionen (Color-Stop
) 40 % und 50 %:
background: linear-gradient(to right, yellow 40%, blue 50%);
Indem man den Farbpaaren sehr eng beisammen liegende Positionen mitgibt, können abrupte Farbwechsel oder Linien hervorgerufen werden; konsequenterweise entsteht eine unifarbene Fläche, wenn hintereinander die gleiche Farbe angegeben wird:
background: linear-gradient(to right, blue 30px, green 30px, green 70px, black 70px, black 71px, red 71px);
Ein Gradient kann auch in einem Winkel verlaufen.
In Verbindung mit einer Kachelung lassen sich sehr einfach komplexe, großflächige Muster erzeugen:
background-image: linear-gradient(to bottom right, green, lime, green, lime, green);
background-size: 20px 20px;
Die Überlagerung von unterschiedlich ausgerichteten Verläufen bewirkt in Kombination mit transparenten Farben ein Interferenzmuster:
background-image:
linear-gradient(-45deg, rgba(0, 0, 255, .5), rgba(128, 128, 255, .5), rgba(0, 0, 255, .5), rgba(128, 128, 255, .5), rgba(0, 0, 255, .5)),
linear-gradient(45deg, rgba(0, 0, 255, .5), rgba(128, 128, 255, .5), rgba(0, 0, 255, .5), rgba(128, 128, 255, .5), rgba(0, 0, 255, .5));
background-size: 20px 20px;
Außer linearen werden auch radiale Gradienten unterstützt:
background-image: radial-gradient(white, black 58%, white 58%, white 62%, black 62%, black 80%, white 80%);
background-size: 25px 25px;
④ Skalierbare Vektorgrafiken (Scalable Vector Graphics)
Ein Piktogramm kann umfangreichen Text überflüssig machen und ist womöglich sogar weltweit verständlich.
Will man ein besonderes Symbol auf einer Webseite anzeigen, so kann dies auf verschiedene Arten geschehen.
Ist es beispielsweise in einem Zeichensatz enthalten, so kann man diesen per CSS einbinden; allerdings müssen alle Browser dann auch auf diesen Zeichensatz zugreifen können.
Eine weitere Möglichkeit ist, das Symbol als Grafik zur Verfügung zu stellen.
Herkömmliche Bitmap-Grafiken (auch Raster- oder Pixelgrafik genannt) haben jedoch den Nachteil, dass sie unansehnlich wirken können, wenn sie nicht in ihrer originalen Größe angezeigt werden; dies ist bei skalierbaren Vektorgrafiken, die durch HTML5 erstmals unterstützt werden, anders.
Während in einer Bitmap-Grafik eine rasterförmige Anordnung verschieden gefärbter Bildpunkte (Pixel) die gewünschten Formen und Strukturen bildet, werden in einer Vektorgrafik Objekte wie Linien, Kurven, Ellipsen oder Polygone durch ihre Eigenschaften/
Ein einfaches skalierbares Piktogramm ist in HTML5 schnell erstellt.
Hierfür müssen zunächst die realen Ausmaße der Grafik angegeben werden, üblicherweise mittels der Attribute width und height im <svg>-Tag.
Ferner werden durch ein weiteres Attribut namens viewbox der Startpunkt und die Ausmaße eines Rechtecks definiert, welches die virtuelle Zeichenfläche darstellt; auf dieser kann man dann zu zeichnen anfangen, beispielsweise zwei Strichzüge für …
| (1.) … ein Haus mit Tür … | |
|---|---|
| Stift an Koordinate (5,18) ansetzen, | M 5 18 |
| 13 Einheiten nach unten bewegen, | v 13 |
| 8 Einheiten nach rechts bewegen, | h 8 |
| 8 Einheiten nach oben bewegen, | v -8 |
| 6 Einheiten nach rechts bewegen, | h 6 |
| 8 Einheiten nach unten bewegen, | v 8 |
| 8 Einheiten nach rechts bewegen, | h 8 |
| 13 Einheiten nach oben bewegen, | v -13 |
| dann noch 11 Einheiten nach links sowie 8 Einheiten nach oben gehen und nach dorthin eine Linie ziehen | l -11 -8 |
| und die Kontur mit einer Linie zurück zum Startpunkt schließen, | Z oder z |
| um die gewünschte Silhouette zu erzeugen. | |
| (2.) … und Dach. | |
|---|---|
| Stift an Koordinate (0,16) ansetzen, | M 0 16 |
| eine Linie 2 Einheiten nach rechts und 2 nach unten ziehen, | l 2 2 |
| eine Linie 14 Einheiten nach rechts und 10,4 nach oben ziehen, | l 14 -10.4 |
| eine Linie 14 Einheiten nach rechts und 10,4 nach unten ziehen, | l 14 10.4 |
| eine Linie 2 Einheiten nach rechts und 2 nach oben ziehen, | l 2 -2 |
| eine Linie 16 Einheiten nach links und 12,4 nach oben ziehen | l -16 -12.4 |
| und die Kontur mit einer Linie zurück zum Startpunkt schließen, | Z oder z |
| um die gewünschte Silhouette zu erzeugen. | |
In den obigen Ausdrücken spezifizieren h / H eine horizontale, v / V eine vertikale und l / L eine sonstige Linie von der gerade aktuellen zu einer angegebenen neuen Position, während Z / z eine Linie zurück zum Startpunkt bewirkt, der durch M / m festgelegt wird.
Dabei handelt es sich bei Werten hinter kleingeschriebenen Buchstaben um Koordinaten oder Einheiten relativ zur augenblicklichen Position des Stiftes, während sich Angaben hinter Großbuchstaben auf absolute Koordinaten der Zeichenfläche beziehen.
Leerzeichen vor und nach Buchstaben sowie vor einem Minuszeichen können entfallen und Aneinanderreihungen von Anweisungen gleichen Typs zu einer einzigen zusammengefasst werden, so dass sich recht kompakte Zeichenketten formulieren lassen, die grafische Objekte beschreiben (siehe Parameter d in den nachfolgenden Code-fill kann bestimmt werden, ob und mit welchem Hintergrund Umrisse automatisch ausgefüllt werden; ferner können weitere Eigenschaften wie beispielsweise Farbe, Dicke und Form der Striche definiert werden.
Demnach könnte HTML-Hamburger Menu
dann wie folgt aussehen:
<svg width="6em" height="6em" viewbox="0 0 32 32"><title>Home</title><path fill="#EF1234" d="M5 18v13h8v-8h6v8h8v-13l-11-8ZM0 16l2 2 14-10.4 14 10.4 2-2-16-12.4Z"></path></svg><svg width="6em" height="6em" viewbox="0 0 32 32"><title>Mail</title><path fill="#BBB" stroke="blue" stroke-width="4px" stroke-linejoin="round" d="M29 9V29H3V9ZL16 20 3 9"></path></svg><svg width="6em" height="6em" viewbox="0 0 32 32"><title>Menu</title><path fill="none" stroke="gray" stroke-width="3px" stroke-linejoin="round" d="M30 2V30H2V2Zm-7 8H9Zm0 6H9Zm0 6H9Z"/></svg>
Dies bewirkt folgende Ausgabe:
Damit soll die kurze Einführung in skalierbare Vektorgrafiken, die nur einen Bruchteil der verfügbaren Funktionalität aufgezeigt hat, an dieser Stelle enden.
Nicht eingegangen wurde auf Curves
(Bézierkurven und elliptische Bögen), weitere Attribute (z. B. fill-rule, opacity, stroke-linecap …) und andere SVG-Elemente wie <line>, <polyline>, <rect>, <polygon>, <circle>, <ellipse> oder <text>.
Wer an weitergehenden Informationen interessiert ist, findet im Internet detaillierte Spezifikationen, Tutorials sowie Beispiele zu diesem Thema und den erwähnten Begriffen.
⑤ Anpassbarer Info-Kasten
Beispiel: flagbox.html
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet …
.flagbox { margin: 2em; border-left: 5px solid black; min-width: 250px; max-width: 350px; text-align: left; }.flagbox > .flagbox { margin: 0px; border: none; }.flagbox .flag { color: white; background-color: black; font-weight: bold; padding: 1ex 1em; }.flagbox p { padding: 1em; margin: 0; }
.flagbox.curved { border-radius: 55px 10px 10px 16px; }.flagbox.curved .flag { border-radius: 10px 0 0 10px; padding-left: 3em; }.flagbox .flag.rounded { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }.flagbox.gradient { background: linear-gradient(to bottom right, lime 0%, white 50%); }.flagbox.gradient .flag { background: linear-gradient(to right, black 0%, darkgreen 100%); }
<div class="flagbox curved"><div class="flagbox gradient curved"><div class="flag rounded">Titelzeile</div> <p>Text</p><div></div>