Webseiten verschönern

1 6

Webseiten verschönern

Tipp 1: Schatten für Container und Texte

Mit dem CSS3-Attribut box-shadow fügen Sie Containern (<div>-Boxen) Schatten hinzu. Sein Pendant für Textelemente heißt text-shadow.

Aktuelle Browser unterstützen box- und text-shadow: IE 9, Firefox 4, Google Chrome 10 und Safari 5 interpretieren beide CSS3-Eigenschaften. Die Webkit-Browser benötigen ihr Prefix, ebenso Firefox einschließlich 3 Version. Die Notation dafür lautet:

#Schattenbox {
box-shadow: 5px 5px 3px #eee; /* aktuelle Browser */
-webkit-box-shadow: 5px 5px 3px #eee; /* Webkit */
-moz-box-shadow: 5px 5px 3px #eee; /* Firefox <=3 */ }

Das Beispiel fügt dem<div>-Element Beispielbox links und unten einen fünf Pixel breiten Schatten im Grauton #eee hinzu. Dabei verwenden Sie einen Unschärfe-Radius von drei Pixeln. Der erste Wert steht für den horizontalen Schatten. Ist er positiv, wird der Schatten rechts dargestellt, ist er negativ, dann links. Der zweite Wert steht für den vertikalen Schatten.

Positive Werte bedeuten: Schatten unten, negative Werte: Schatten oben. Der dritte Wert gibt den Unschärfe-Radius an (Blur). Für einen inneren Schatten hängen Sie die box-shadow Eigenschaft :inset an. Setzen Sie den ersten und zweiten Wert auf 0, malen Sie an allen vier Seiten der Box einen inneren Schatten mit dem angegebenen Blur-Wert:

#Innenschatten {
box-shadow: 0 0 10px #ccc; /* aktuelle Browser */
-webkit-box-shadow: 0 0 10px #ccc; /* Webkit */
-moz-box-shadow: 0 0 10px #ccc; /* Firefox <=3 */ }

Mit dem Attribut text-shadow schattieren Sie Textelementen bei gleicher Werte-Zuordnung. Sehen Sie dafür die dreifache Notation:

.Textschatten {
text-shadow: 1px 1px 2px #eee; /* aktuelle Browser */
-webkit-text-shadow: 1px 1px 2px #eee; /* Webkit */
-moz-text-shadow: 1px 1px 2px #eee; /* Firefox <=3 */ }

Dies erzeugt eine CSS-Klasse Textschatten für HTML-Tags wie <p>, <h1>, <h2>, um deren Inhalte leicht grau zu schattieren.

2 6

Geschickter Einsatz: Mit border-radius erzeugen Sie nahezu beliebige Formen, bis aus einem gewöhnlichen
-Container ein Kreis wird.

Tipp 2: Abgerundete Ecken für Elemente

Webdesigner versehen mit CSS3 Layout-Elemente mit abgerundeten Ecken.

Sehr einfach runden Sie bei einem <div>-Container alle vier Ecken gleichmäßig ab, zum Beispiel mit einem Radius von 15 Pixeln:

#Rundecken {
border-radius: 15px; /* aktuelle Browser und Webkit */
-moz-border-radius: 15px; /* Firefox <=3 */ }

Die zweite Zeile unterstützt Firefox bis Version 3, die erste Zeile alle anderen neuen Browser. Anstatt alle Ecken gleichmäßig abzurunden, definieren Designer auch jede Eckenrundung separat:

#Rundecken_einzeln {
border-top-left-radius: 15px; /* oben links */
border-top-right-radius: 0px; /* oben rechts */
border-bottom-left-radius: 30px; /* unten links */
border-bottom-right-radius: 50px; /* unten rechts */ }

Vergessen Sie bitte nicht, dieses Angaben auch mit -moz zu definieren. Eine weitere Variante rundet Ecken dergestalt, dass diese nicht gleichmäßig breit und hoch sind. Für solch krumme Ecken geben Sie zwei Werte nach einem border-radius-Attribut an. Der erste Wert bestimmt den horizontalen Radius, der zweite den vertikalen Radius. Wie im Bild oben formt diese Syntax aus einem <div>-Container einen Kreis.

#Kreis {
height: 340px; width: 340px; border-radius: 170px;
-moz-border-radius: 170px; }

3 6

Webseiten verschönern

Tipp 3: Mehrere Hintergrundbilder zugleich

CSS3 gestylte Elemente bereichern Ihre Webseite mit mehreren Hintergrundbildern. Alle modernen Browser unterstützen das.

Jedes HTML-Element, für das Hintergrundbilder erlaubt sind, lässt sich mittels CSS3 damit ausstatten. So legen Sie für die gesamte Website mehrere Hintergrundbilder fest, aber auch für einzelne <div>-Boxen. Ein Beispiel:

body {
background: url(../images/oben-links.png) top left
no-repeat, url(../images/unten-rechts.png) bottom right no-repeat; }

Die Webseite erhält die Hintergrundbilder oben-links.png und unten-rechts.png an den entsprechenden Stellen. Beide Bilder werden nicht wiederholt (no-repeat). Designer dürfen alle erlaubten Attribute für Hintergrundbilder anwenden, um HTML-Elementen mehrere Hintergrundbilder zuzuweisen. Statt der Angaben top, left, bottom und right geben Sie auch Pixelwerte an, um Bilder genau zu platzieren.

4 6

Webseiten verschönern

Tipp 4: (Halb)transparente Elemente

Mit dem CSS3-Attribut opacity bestimmen Webdesigner die Deckkraft eines HTML-Elementes. Dadurch gestalten Sie nun einfach durchscheinende und durchsichtige Seitenbereiche.

Alle neuen Browser unterstützten opacity. Damit aber auch ältere Webbrowser Transparenz-Effekte richtig darstellen, sind mehrere Definitionen zugleich notwendig:

.durchscheinend { .../*siehe Heft-DVD */

Die Angaben 0.5 bzw. 50 stehen jeweils für 50 Prozent Deckkraft. Ändern Sie diese zum Beispiel in 0.8 und 80, um 80 Prozent Deckkraft des Elements zu erreichen - es scheint also zu 20 Prozent durch. opacity: 0 steht demnach für voll transparent, opacity: 100 für gar nicht transparent. Das Programm Durchscheinend.html setzt das Beispiel um.

5 6

Beim Umrechnen von Farben helfen Webdesignern spezielle Tools, die es inzwischen auch online gibt, wie unter www.colorschemer.com.

Tipp 5: Farbangaben nach Designer-Maß

Mit CSS3 geben Sie aber auch Werte wie "rgba(0,0,0,0)" ein, was den Gewohnheiten der Grafik-Designer entspricht.

Farben mit Hilfe der Farbkanäle Rot (R), Grün (G) und Blau (B) darzustellen, ist bei Photoshop üblich. Aus den drei Grundfarben mischt sich jede Farbe im RGB-Farbspektrum. Grafik-Designer nutzen die Farbangaben auch im Web. So müssen Sie keine Farbwerte umrechnen, was die Übersichtlichkeit verbessert. Eine entsprechende Farbangabe in CSS3 sieht beispielsweise so aus:

.Rot_deckend {
color: rgba(255, 0, 0, 1); }

Der erste Wert steht für den Rot-Kanal (R) - im Beispiel ist er 255, was der hexadezimalen Angabe FF entspricht. Der zweite Wert steht für den Grün- und der dritte für den Blau-Kanal - beide 0, hexadezimal "00". Die erzeugte Farbe entspricht also exakt der Farbe "#FF0000" - reines Rot. Doch warum heißt das Attribut rgba? Anders gefragt: Was macht der vierte Wert? Das "a" in rgba steht für Alpha-Kanal. Mit dieser Angabe legen Designer die Deckkraft der Farbe fest.

Im Beispiel bedeutet der Wert 1 exakt 100 Prozent Deckkraft. Eine Angabe wie

.Gelb_durchscheinend { color: rgba(255, 255, 0, 0.75); }

erzeugt eine Klasse, die HTML-Elementen durchscheinendes Gelb als Farbe zuordnet. Manche Grafik-Designer machen Farbangaben im HSL-Farbraum. Die Abkürzung steht für Hue, Saturation, Luminance (Farbton, Sättigung, Helligkeit).

HSL erleichert es Ihnen, Farben besser zu justieren als bei anderen Farbraummodellen. Wollen Sie etwa in RGB eine Farbe abdunkeln, müssen Sie zwei Werte bearbeiten. HSL begnügt sich mit dem Helligkeitswert. In CSS3 benutzt man HSL im Prinzip genau wie RGB: .Gruen {color: hsl(120, 100%, 50%); }. Bei der Abwandlung hsla lässt sich, analog zu rgba, ein Alpha-Kanal-Wert anhängen: .Gruen_durchscheinend {color: hsla(120, 100%, 50%, 0.25); }.

Bitte beachten Sie: Leider interpretieren nur die neuesten Browser-Generationen rgba und hsla richtig. Für ältere Browser müssen Sie noch auf traditionelle Web-Farbangaben zurückgreifen.

6 6

Freie Wahl: Mehr als 12 000 Schriftarten laden Sie von der Site dafont.com, die Sie zumeist frei privat nutzen dürfen.

Tipp 6: Neue Schriftarten für das Web

Mit HTML5 und CSS3 nutzen Sie nahezu jede Schriftart im Webdesign. Dafür sorgt auch der neue CSS-Selektor @font-face.

Mit @font-face lassen sich Schriftart-Dateien (englisch: Font Files) nützlich auf der Website einbinden. Die Lizenzen der Schriften müssen es erlauben, diese im Web zu nutzen. Kostenlose Fonts, wie Sie diese von www.dafont.com oder www.1001freefonts.com herunterladen, dürfen Sie zumeist auf privaten Webseiten einsetzen.

Wenn Sie diese Schriften in kommerziellen Projekten verwenden, sollten Sie sich immer genauestens über die jeweiligen Bedingungen informieren. Haben Sie Ihre Wunschschriftarten heruntergeladen, speichern Sie diese am besten in einem separaten Verzeichnis des Webspace, auf dem sich auch die Website befindet. In der Stylesheet-Datei binden Sie dann die Schriften recht einfach ein:

@font-face {
font-family: "Schriftname"; /* Bezeichnung des Fonts */
src: url("../meinefonts/FontFile.otf");
font-style: normal;
font-variant: normal;
font-stretch: normal;
font-weight: 500; }

Die letzten vier Zeilen definieren, wie das Aussehen der Schrift mit den CSS-Attributen den Text gestaltet. Je nach Schriftart müssen Sie damit experimentieren, um optimale Ergebnisse für zu erhalten.

Webseiten verschönern

Webseiten verschönern

Geschickter Einsatz: Mit border-radius erzeugen Sie nahezu beliebige Formen, bis aus einem gewöhnlichen -Container ein Kreis wird.

Webseiten verschönern

Webseiten verschönern

Beim Umrechnen von Farben helfen Webdesignern spezielle Tools, die es inzwischen auch online gibt, wie unter www.colorschemer.com.

Freie Wahl: Mehr als 12 000 Schriftarten laden Sie von der Site dafont.com, die Sie zumeist frei privat nutzen dürfen.

Geschickter Einsatz: Mit border-radius erzeugen Sie nahezu beliebige Formen, bis aus einem gewöhnlichen
-Container ein Kreis wird.