HTML and CSS Reference
In-Depth Information
Tipp zur Gestaltung von halbtransparenten Schatten
Wenn Sie einen halbtransparenten Schatten gestalten möchten, definieren Sie die
Farbe nicht als HEX-Wert, sondern als RGBA. Dabei stehen Ihnen die drei Kanäle
R
ot,
G
rün und
B
lau zur Verfügung, zusätzlich aber auch der
A
lpha-Kanal, der die Trans-
parenz definiert. Einen schwarzen Schatten mit 50 % Deckkraft erstellen Sie wie folgt:
.schatten {
box-shadow: 2px 5px 10px rgba(0,0,0,0.5);
}
Die ersten drei Werte in der Klammer stehen dabei für die drei Farbkanäle RGB. Die
letzte Zahl definiert die Transparenz und wird in Dezimalschreibweise mit Punkt
angegeben.
Schatteneffekte sind besonders rechenintensiv, wenn sie in Kombination mit Ani-
mationen auftreten. Nicht, dass das an dieser Stelle eine Rolle spielen würde, aber wir
wollen Sie schon mal darauf hinweisen.
Um schnell und einfach den Code für einen Schatten zu erzeugen, lohnt ein Blick auf
http://css3gen.com/box-shadow/
. Dort können Sie über ein Interface die Schatten-
einstellungen vornehmen und die Webseite gibt gleich den passenden Code dafür
aus. Praktisch!
background-size
Über
background-size
können Sie die Größe eines Hintergrundbildes einstellen.
Dabei ist die Festlegung über Pixel- und Prozentwerte möglich, aber auch über die
beiden vordefinierten Optionen
contain
und
cover
. Im Fall der Sharky-WebApp
möchten Sie durch eine leichte Wassertextur den Hintergrund der App etwas auflo-
ckern. Wir sind bei Flickr fündig geworden und verwenden ein Bild von User »that
one doood«. Viele Flickr-Benutzer bieten ihre Bilder unter einer Creative-Commons-
Lizenz an, das heißt, Sie dürfen diese, unter Nennung des Autors, weiterverwenden.
Speichern Sie das Bild im Unterordner
bilder
unter dem Namen
hintergrund.jpg.
Wei-
sen Sie nun dem Hintergrund der WebApp über
<body>
das Hintergrundbild zu.
Gleichzeitig setzen Sie die Textfarbe noch auf Weiß. Der folgende Codeblock kommt
an den Anfang Ihrer CSS-Datei, direkt hinter die Definition des Zeichensatzes:
body {
background-image:url(../bilder/hintergrund.jpg);
background-size:contain;
background-repeat:no-repeat;
color:#fff;
}
Search WWH ::
Custom Search