Galerie

Webseiten verschönern - Webseiten verschönern

Webseiten verschönern

Tipp 1: Schatten für Container und Texte

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

Aktuelle Browser unterstü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 dafü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 fügt dem<div>-Element Beispielbox links und unten einen fünf Pixel breiten Schatten im Grauton #eee hinzu. Dabei verwenden Sie einen Unschärfe-Radius von drei Pixeln. Der erste Wert steht für den horizontalen Schatten. Ist er positiv, wird der Schatten rechts dargestellt, ist er negativ, dann links. Der zweite Wert steht für den vertikalen Schatten.

Positive Werte bedeuten: Schatten unten, negative Werte: Schatten oben. Der dritte Wert gibt den Unschärfe-Radius an (Blur). Fü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 dafü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 für HTML-Tags wie <p>, <h1>, <h2>, um deren Inhalte leicht grau zu schattieren.

Die beliebtesten Bildergalerien
Galerie
Videos freischalten
Solange YouTube und die GEMA sich streiten, schauen deutsche Musikfreunde in die Röhre. Mit den Tipps in der Galerie lässt sich die YouTube-Sperre…
Galerie
Top 10
WLAN-Router dienen als Zentrale für Internet und WLAN. Wir zeigen Ihnen die zehn Geräte, die im Test am besten abgeschnitten haben.
Galerie
God Mode, Virtual Desktops , Startmenü & Co.
Wir verraten 20 Tipps und Tricks für Windows 10: Damit haben Sie das neue Microsoft-Betriebssystem zum Release direkt im Griff.
Weitere Bildergalerien entdecken
Einen chronologischen Überblick über alle bisherigen Bildergalerien finden Sie in unserem Archiv-Bereich. Entdecken Sie unsere faszinierende Bilder!