SunPhoenix
Bekanntes Gesicht
CSS ist ein zentraler Begriff in der Welt des World Wide Webs, daher natürlich auch auf Cynamite. In diesem Blog werde ich euch erklären, wie ihr mit wenig Aufwand sehr schöne Effekte auf euer Profil zaubern könnt.
Borders (Rahmen)
Mit CSS3 lassen sich verschiedene Aspekte der Rahmenlinien um einen Container verändern. Angefangen mit abgerundeten Ecken.
border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
-webkit-border-radius: 5px 5px;
Mit diesem Stück Code werden die Ecken eines Containers mit einem Radius von 5px abrunden. Der erste Wert definiert dabei die Ecken oben links und unten rechts an, der zweite Wert legt den Radius für die anderen beiden Ecken fest. Natürlich kann man auch einen Wert verwenden, wodurch alle Ecken mit diesem Radius gerundet werden, oder man kann auch jeden Ecken einzeln abrunden. Die Funktionsweise bleibt jedoch immer gleich mit einem Abstand zwischen den Werten.
Auffallend ist hier auch, dass insgesamt drei verscheidene Styles definiert werden. Der erste steht hier für Opera und den Internet Explorer, der zweite für Firefox und der dritte für Chrome und Safari. Alle Browser haben also einen anderen Syntax, der bei den meisten CSS3-Styles einzeln berücksichtigt werden muss.
Box-Shadow (Schatten)
Box-Shadow, oder auch als Dropshadow bekannt, hebt einen Container aus dem umgebenden Container hervor.
box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
-webkit-box-shadow: 0px 0px 5px #000;
Wie ihr seht, ist die Funktionsweise der Dropshaddows schon etwas komplizierter, jedoch immernoch logisch aufgebaut. Der erste Wert definiert den horizontalen Versatz des Schattens, der zweite Wert legt den vertikalen Versatz fest, der dritte legt die Unschärfe des Schattens fest, und zuletzt wird noch die Farbe des Schattens angegeben.
Im Beispiel befindet sich der Schatten direkt unter dem Container und wird mit einem Radius von 5px ungeschärft. Klingt momentan vielleicht nicht wirklich sinnvoll, ist aber ganz normal. Man kann im Prinzip sagen, je grösser der dritte Wert ist, desto weiter reicht der Schatten vom Container, und desto transparenter wird er.
Text-Shadow (Textschatten)
Eine inzwischen recht oft eingesetzte Technik, die vielmals einen drastischen Effekt auf die Texterscheinung haben kann. Die wichtigste Regel bei der Textschattierung ist der Fakt, dass sie nicht zu stark sichtbar sein darf, ausser in Überschriften oder ähnlichem. Im ganz normalen Text sollte die Schattierung so dezent wie nur möglich ausfallen.
text-shadow: 0px 0px 1px #fff;
Auffallend ist hier, dass endlich mal wieder ein Style für alle Browser reicht. Sowohl Firefox, Safari, Chrome, Opera als auch der Internet Explorer unterstützen diese Technik.
Der Syntax ist hier im Grunde genommen der selbe wie der, der beim Box-Shadow verwendet wird.
Background Gradients (Hintergrudnverläufe)
Mit den Hintergrundverläufen kommen wir zu einer eher komplizierten Angelegenheit. Momentan wird die Technik nur von Safari, Chrome und Firefox unterstütz, jedoch werden wieder zwei verschiedene Syntaxe verwendet.
background: -moz-linear-gradient(top 0, bottom 0, #000, #acacac 50%, #fff);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#000), color-stop(50%, #acacac), to(#fff));
Auf den ersten Blick wirkt dies schrecklich kompliziert, und das ist es am Anfang leider auch. Am besten ist es, wenn ihr euch zuerst mit der -moz-Methode auseinandersetzt, die in Firefox verwendet wird. -moz-linear-gradient legt fest, dass der Verlauf linear von Punkt A nach Punkt B verlaufen soll. Diese beiden Punkten werden mit den ersten beiden Werten in den Klammern festgelegt. In diesem Beispiel haben wir letzten Endes einen Verlauf von der linken oberen Ecke in die untere linke Ecke eines Containers. Der nächste Wert gibt die Startfarbe an. Der zweite steht hier für eine Farbe, die genau in der Mitte (50%) des Containers in den Verlauf eingefügt wird, und schliesslich der dritte Wert, der hier für die Endfarbe zuständig ist.
Die -webkit-Variante ist, sofern man die vorherige Variante verstanden hat, auch recht einfach zu verstehen. Hier wird die Art des Verlaufs nicht vor der Klammer definiert, sondern als erster Wert in der Klammer. Die beiden Punkte werden dann wieder genau gleich festgelegt, ausser dass Chrome und Safari die Pixel Werte vor den relativen Angaben haben wollen. Als nächstes folgt die Startfarbe, die in der Funktion from() festgelegt wird. Die Farbe in der Mitte wird mithilfe eines color-stop()s festgelegt, in dem zuerst die Position und dann die Farbe notiert sind. Zuletzt wird noch die Endfarbe definiert und zwar mit der Funktion to().
Dies ist nur mal eine kleine Einführung in einige der wichtigsten Effekte aus CSS3. Weitere Tutorials werde ich möglicherweise noch nachliefern.
Bei Fragen oder Verbesserungsvorschlägen zu diesem Blog könnt ihr euch gerne in den Kommentaren zu Wort melden.
(CSS3 wird momentan in folgenden Browsern vollständig unterstütz: Mozilla Firefox 3.6+, Apple Safari 4.0+, Google Chrome 3.0+, Opera 10.50+ und Internet Explorer 9+. Wenn nicht anders angegeben funktionieren die Beispiele in allen zuvor erwähnten Browsern.)
Borders (Rahmen)
Mit CSS3 lassen sich verschiedene Aspekte der Rahmenlinien um einen Container verändern. Angefangen mit abgerundeten Ecken.
border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
-webkit-border-radius: 5px 5px;
Mit diesem Stück Code werden die Ecken eines Containers mit einem Radius von 5px abrunden. Der erste Wert definiert dabei die Ecken oben links und unten rechts an, der zweite Wert legt den Radius für die anderen beiden Ecken fest. Natürlich kann man auch einen Wert verwenden, wodurch alle Ecken mit diesem Radius gerundet werden, oder man kann auch jeden Ecken einzeln abrunden. Die Funktionsweise bleibt jedoch immer gleich mit einem Abstand zwischen den Werten.
Auffallend ist hier auch, dass insgesamt drei verscheidene Styles definiert werden. Der erste steht hier für Opera und den Internet Explorer, der zweite für Firefox und der dritte für Chrome und Safari. Alle Browser haben also einen anderen Syntax, der bei den meisten CSS3-Styles einzeln berücksichtigt werden muss.
Box-Shadow (Schatten)
Box-Shadow, oder auch als Dropshadow bekannt, hebt einen Container aus dem umgebenden Container hervor.
box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
-webkit-box-shadow: 0px 0px 5px #000;
Wie ihr seht, ist die Funktionsweise der Dropshaddows schon etwas komplizierter, jedoch immernoch logisch aufgebaut. Der erste Wert definiert den horizontalen Versatz des Schattens, der zweite Wert legt den vertikalen Versatz fest, der dritte legt die Unschärfe des Schattens fest, und zuletzt wird noch die Farbe des Schattens angegeben.
Im Beispiel befindet sich der Schatten direkt unter dem Container und wird mit einem Radius von 5px ungeschärft. Klingt momentan vielleicht nicht wirklich sinnvoll, ist aber ganz normal. Man kann im Prinzip sagen, je grösser der dritte Wert ist, desto weiter reicht der Schatten vom Container, und desto transparenter wird er.
Text-Shadow (Textschatten)
Eine inzwischen recht oft eingesetzte Technik, die vielmals einen drastischen Effekt auf die Texterscheinung haben kann. Die wichtigste Regel bei der Textschattierung ist der Fakt, dass sie nicht zu stark sichtbar sein darf, ausser in Überschriften oder ähnlichem. Im ganz normalen Text sollte die Schattierung so dezent wie nur möglich ausfallen.
text-shadow: 0px 0px 1px #fff;
Auffallend ist hier, dass endlich mal wieder ein Style für alle Browser reicht. Sowohl Firefox, Safari, Chrome, Opera als auch der Internet Explorer unterstützen diese Technik.
Der Syntax ist hier im Grunde genommen der selbe wie der, der beim Box-Shadow verwendet wird.
Background Gradients (Hintergrudnverläufe)
Mit den Hintergrundverläufen kommen wir zu einer eher komplizierten Angelegenheit. Momentan wird die Technik nur von Safari, Chrome und Firefox unterstütz, jedoch werden wieder zwei verschiedene Syntaxe verwendet.
background: -moz-linear-gradient(top 0, bottom 0, #000, #acacac 50%, #fff);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#000), color-stop(50%, #acacac), to(#fff));
Auf den ersten Blick wirkt dies schrecklich kompliziert, und das ist es am Anfang leider auch. Am besten ist es, wenn ihr euch zuerst mit der -moz-Methode auseinandersetzt, die in Firefox verwendet wird. -moz-linear-gradient legt fest, dass der Verlauf linear von Punkt A nach Punkt B verlaufen soll. Diese beiden Punkten werden mit den ersten beiden Werten in den Klammern festgelegt. In diesem Beispiel haben wir letzten Endes einen Verlauf von der linken oberen Ecke in die untere linke Ecke eines Containers. Der nächste Wert gibt die Startfarbe an. Der zweite steht hier für eine Farbe, die genau in der Mitte (50%) des Containers in den Verlauf eingefügt wird, und schliesslich der dritte Wert, der hier für die Endfarbe zuständig ist.
Die -webkit-Variante ist, sofern man die vorherige Variante verstanden hat, auch recht einfach zu verstehen. Hier wird die Art des Verlaufs nicht vor der Klammer definiert, sondern als erster Wert in der Klammer. Die beiden Punkte werden dann wieder genau gleich festgelegt, ausser dass Chrome und Safari die Pixel Werte vor den relativen Angaben haben wollen. Als nächstes folgt die Startfarbe, die in der Funktion from() festgelegt wird. Die Farbe in der Mitte wird mithilfe eines color-stop()s festgelegt, in dem zuerst die Position und dann die Farbe notiert sind. Zuletzt wird noch die Endfarbe definiert und zwar mit der Funktion to().
Dies ist nur mal eine kleine Einführung in einige der wichtigsten Effekte aus CSS3. Weitere Tutorials werde ich möglicherweise noch nachliefern.
Bei Fragen oder Verbesserungsvorschlägen zu diesem Blog könnt ihr euch gerne in den Kommentaren zu Wort melden.
(CSS3 wird momentan in folgenden Browsern vollständig unterstütz: Mozilla Firefox 3.6+, Apple Safari 4.0+, Google Chrome 3.0+, Opera 10.50+ und Internet Explorer 9+. Wenn nicht anders angegeben funktionieren die Beispiele in allen zuvor erwähnten Browsern.)
