Sep
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

Mit der Eigenschaft border-radius lassen sich für Boxen (Block-Elemente) runde bzw. elliptische Ecken realisieren.

Code:

border-radius: 12px 5px;
-moz-border-radius: 12px 5px;
-khtml-border-radius: 12px 5px;
-webkit-border-radius: 12px 5px;

2. box-shadow – Schlagschatten

Mit box-shadow kann man Boxen einen Schatten versehen und diesen auch noch mit einem Blur-Effekt versehen.

Code:

box-shadow: 5px 5px 5px #f00;
-moz-box-shadow: 5px 5px 5px #f00;
-webkit-box-shadow: 5px 5px 5px #f00;

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

Mit text-shadow kann man Texten einen Schatten versehen.

Code:

text-shadow: 1px 1px 1px #f00;

Text-Shadow ist ganz simpel und kommt sogar schon ohne browserspezifische Präfixe aus.

Es können auch mehrere Schatten erzeugt werden.

Code:

text-shadow: 1px 1px 1px #f00,
-1px -1px 1px #228a0e;

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.

Code:

opacity: 0.6;
-moz-opacity:0.6;
-khtml-opacity: 0.6;
filter: alpha(opacity=60);

5. gradient – Farbverlauf

Mit gradient kann ich Elementen einen Farbverlauf geben. Hier sind mehrere Farbstufen möglich.

Code:

background: -moz-linear-gradient(top, #e9e342, #228a0e);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e342), color-stop(1, #228a0e));
filter: progid:DXImageTransform.Microsoft.gradient (startColorStr=#e9e342, EndColorStr=#228a0e);
-ms-filter: „progid:DXImageTransform.Microsoft.gradient (startColorStr=#e9e342, EndColorStr=#228a0e)“;

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. 😉

Schlagwörter: CSS3, Design, Firefox, Präfix, Tutorial, Webdesign

2 Kommentare + Kommentar hinzufügen

Tina und Meggi 4. September 2011 um 21:24 Uhr

ja stimmt!!! in pink hätte es besser ausgesehen 😉 *hihi*
admin 5. September 2011 um 15:49 Uhr

Pink ist mir auf die Schnelle natürlich nicht eingefallen. Ich denke auch nicht, dass es dann besser wäre. 😉