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.