4
2011
schöne und nützliche CSS Spielereien
Dank Cascading Style Sheets (kurz CSS) sehen Webseiten so aus wie sie aussehen. Wie der Name schon sagt, sorgt diese Sprache dafür eure Webseite zu stylen und zu definieren. Momentan sind wir bei der Version CSS3 dank der wir sehr schöne sachen mit CSS und HTML anstellen können. Ein großes Problem daran ist nur, dass nicht alle Browser diese Sprache interpretieren können. Hier könnt ihr gucken was euer und andere Browser interpretieren können und was nicht. Eine paar schöne und nützliche Sachen was mit CSS3 möglich ist habe ich versucht hier zusammen zu tragen.
Browserspezifische Erweiterungen
Webdesigner können browserspezifische Erweiterungen vornehmen, indem sie die Eigenschaften mit einem Präfix versehen. Die folgende Tabelle zeigt die Präfixe der gängigen Browser:
Präfix | Browser | Beispiel |
---|---|---|
-khtml- | Konqueror | -khtml-border-radius |
-moz- | Gecko-basierte Browser, z.B. Firefox | -moz-border-radius |
-ms- | Internet Explorer | -ms-border-radius |
-o- | Opera | -o-border-radius |
-webkit- | Webkit-basierte Browser, z.B. Google Chrome oder Safari | -webkit-border-radius |
1. Border Radius – runde Ecken
2. box-shadow – Schlagschatten
Die ersten zwei Angaben bestimmen den horizontalen und vertikalen Abstand des Schlagschattens. Positive Werte bedeuten, dass der Schatten rechts oder oben der Boxen positioniert wird, negative Werte positionieren den Schatten links bzw. unter der Box.
Die dritte Angaben definiert, wie scharf der Schatten dargestellt werden soll. Je höher der Wert, desto verschwommer stellt der Browser den Schatten dar. Negative Werte sind an dieser Stelle nicht erlaubt.
3. text-shadow – Textschatten
Text-Shadow ist ganz simpel und kommt sogar schon ohne browserspezifische Präfixe aus.
4. opacity – Deckkraft / Transparenz
Mit opacity kann ich Elemente transparent bzw. halbtransparent darstellen. In meinem Beispiel will ich ein Bild einmal mit 100% und einmal mit 60% Deckkraft darstellen.


5. gradient – Farbverlauf
Das waren 5 einfache Beispiele für den schönen Einsatz von CSS bzw. CSS3. Entschuldigt für diese Farben, aber ich wollte es deutlich darstellen. 😉
ja stimmt!!! in pink hätte es besser ausgesehen 😉 *hihi*
Pink ist mir auf die Schnelle natürlich nicht eingefallen. Ich denke auch nicht, dass es dann besser wäre. 😉