Informationen zum Thema CSS3
Vielleicht haben es bereits ein paar entdeckt, aber einige von euch wussten sicherlich nichts davon. Denn gegen Ende des Jahres 2008 (also so November/Dezember), kam CSS3 raus. Allerdings wird CSS3 immer noch nicht von allen Browsern zu 100% unterstützt. Jeder Browser unterstützt (wie soll es auch anders sein) immer nur bestimmte Dinge, aber nicht alle. Nicht einmal der sehr beliebte FF beherrscht alle neuen CSS3 Features. Aber trotzdem hier mal ein paar Informationen und Funktionen, die CSS3 nun bietet:
Rahmen und Boxen
Border-Style Ergänzung: Viele haben lange darauf gewartet, dass dies nun möglich ist. Das bedeutet, dass es jetzt möglich ist, die Rahmen abzurunden.
http://www.css3.info/preview/rounded-border/
Dies wird aber nur von FF und Safari unterstützt. Aber es geht weitaus mehr als nur das Abrunden von Ecken. Es ist mittlerweile auch möglich eigene Grafiken als Rahmen zu verwenden.
http://www.css3.info/preview/border-image/
Man kann den Boxen jetzt aber auch einen Schatten verpassen.
http://www.css3.info/preview/box-shadow/
Hintergrund
Mit background-origin und background-clip habt ihr bei FF und Safari die Möglichkeit zu bestimmen, wo eine Grafiken sitzen soll. Dazu gibt es 3 Werte.
1. border (wie weit es direkt vom Rand weg sein soll. Rand mit einbezogen)
2. padding (wie weit es vom Rand weg sein soll)
3. content (wie weit es vom Text weg sein soll)
http://www.css3.info/preview/background-origin-and-background-clip/
Eine weitere schöne Möglichkeit den Hintergrund zu gestalten ist das Verwenden von mehreren Bildern. Leider wird dies aber noch nicht von den gängigsten Browsern unterstützt.
http://www.css3.info/preview/multiple-backgrounds/
Farbe
Bestimmt gibt es unter euch einige, die sich mit den Hexcodes nicht so zurecht finden können. Die würden die Farbe viel lieber in RGB angeben. Dies ist jetzt mit CSS3 möglich. Eine weitere Möglichkeit die Farbe anzugeben ist jetzt auch HSL. Wem das aber noch nicht reicht, der kann das Ganze noch ein bisschen erweitern. Es ist nämlich möglich, auch die Transparenz mit anzugeben. Dies kann man auf 3 verschiedene Arten machen:
1. RGBA (anstatt RGB)
2. HSLA (anstatt HSL)
3. opacity (gab es bisher bereits, funktionierte aber noch nicht so toll in allen Browsern)
http://www.css3.info/preview/hsl/
http://www.css3.info/preview/hsla/
http://www.css3.info/preview/opacity/
http://www.css3.info/preview/rgba/
Text
Wer gerne mit Text-Effekten spielt, der kann sich über die neuen CSS3 Funktionen für Texte freuen. So könnt ihr euren Texten einen Schatten geben, in Brand setzen, animieren oder sonst etwas mit ihnen machen.
http://www.css3.info/preview/text-shadow/
http://www.css3.info/preview/text-overflow/
http://www.css3.info/preview/word-wrap/
Selektoren
Eine kleinere Spielerei betrifft das Selektieren von bestimmten Elementen. Genauer gesagt trifft es hier auf die "title" der Tags. Ihr könnt bestimmen, welche Text mit welchen Titeln verändern sollen. Wenn ihr also wollt, dass sich nur die Absätze mit dem Titel "Home" farbig verändern sollen, dann könnt ihr dies jetzt tun.
http://www.css3.info/preview/attribute-selectors/
Sonstige Module
Mit CSS3 habt ihr jetzt die Möglichkeit, ein Design beispielsweise an die Auflösung anzupassen. Zwar gab es diese Funktion schon vorher, allerdings wurde sie jetzt ausgebaut.
http://www.css3.info/preview/media-queries/
Eine weitere und nette Funktion ist das Teilen in Spalten. Früher hat man das immer mit Tabellen oder anderen Methoden gelöst. Das ist jetzt vorbei. Jetzt könnt ihr das ganz einfach und ohne Probleme mit CSS lösen.
http://www.css3.info/preview/multi-column-layout/
Ein etwas Ungewöhnliches Feature wurde für Opera eingebaut. Damit habt ihr jetzt die Möglichkeit, Opera für euch sprechen zu lassen. Da Opera diese Funktion bereits eingebaut hat, könnt ihr es mit diesen CSS Befehlen aktivieren.
http://www.css3.info/preview/speech/
Abschluss
So, ich habe euch CSS3 nun etwas Näher gebracht. Ich wünsche euch viel Spaß beim Ausprobieren. Sollten Probleme auftreten oder solltet ihr Fragen haben, könnt ihr diese natürlich hier im CSS Bereich stellen
Ich werde mich dann darum kümmern. Vielleicht befassen sich aber auch andere damit, dann können die euch natürlich auch helfen.
Wenn euch das aber nicht reicht (ich habe hier ja nicht alle Funktionen erwähnt), habt ihr hier ein paar hilfreiche Seiten, die euch beim Einstieg in CSS3 etwas helfen und weitere Funktionen erklären:
http://www.css3.info/
http://www.webmasterpro.de/coding/article/css3.html
http://www.w3.org/TR/css3-roadmap/______________
LG André
GMMTS.de