Neue Designmöglichkeiten mit CSS3

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

Wird es CSS3 uch für Windows Internet Explorer gebn?

Es ist für jeden Browser, nur unterstützt derzeit noch nicht jeder Browser jede Funktion
______________
LG André

GMMTS.de

ist dieses CSS 3 besser als CSS?

gibt es einen vollständigen code oder muss ich alles selvber zusammen basteln?
______________
http://modellbau-timpen.de.tl <= Modellbau
http://wolles-modellbahn.de.tl <= Eisenbahn

CSS 3 is ne tolle Sache, aber gibt es auch eine Liste, in der aufgeliestet wird, was wo funktioniert?


MfG: René
______________
Das bin ich und meine Art, 17 halt.

Projekt Nr. 2- http://freunde-des-pussel.de.tl

Im Moment benutzt ihr alle eigentlich CSS 2.1.
CSS 3 ist die neue Version von CSS, wird aber nur von den wenigsten Browsern unterstützt.
Googelt mal nach CSS 3 Tutorial o.ä..
______________
*** Signatur editiert vom Support Team - Signatur zu groß - max. 650 x 150 px ***

Ja Rene , gibt es hier : http://www.webmasterpro.de/coding/article/css3.html
Scrolle einwenig herunter . Dort kann man sehen , welcher Browser was umsetzen kann
Gleichzeit auch eine Übersicht , was mit CSS3 möglich sein wird .

Und hier kann man testen , ob der eigene Browser CSS3 tauglich ist :
http://www.css3.info/selectors-test

Gruß Wolfgang
______________