Kleiner Blick auf CSS3

CSS3Jens Grochtdreis

Welche Lücke füllt CSS3?

Moving from hacks to solution

http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/

Animationen

Verringerung des Grafikeinsatzes

neue Layoutmodelle

mehr Möglichkeiten mit Rahmen und Hintergründen

neue Selektoren

runde Ecken

Verläufe (gradient)

Transitions

mehrere Spaltencalc()

Transparenz mit rgba()

media-queries

Die Vorteile

‣Weniger Schmuckbilder werden benötigt.

‣Weniger Javascript wird benötigt.

‣ Animationen und Transitionen sind mittels CSS schneller, als mittels Javascript.

‣ Es wird seltener Code nur für Optik benötigt, der Quellcode schmaler und lesbarer.

Die Nachteile

Es gibt keine!

Naja, vielleicht einen kleinen

Evolution, nicht Revolution

‣ CSS3 baut auf CSS2 auf

‣ Browser ignoriert einfach unbekannte Eigenschaften: graceful degredation

‣ Gibt echte Lösungen für immer wiederkehrende Designprobleme

Kann ich CSS3 schon heute nutzen?

JEIN

TextManche neuen Eigenschaften

sind in keinem Browser implementiert.

Funktioniert das auch im IE?

http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg

http://www.findmebyip.com/litmus/

http://www.findmebyip.com/litmus/

Microsoft ist der Bremsklotz des Fortschritts

Aber nur, wenn wir uns bremsen lassen!

http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg

Alte IE-Versionen ...

http://workdiary.de/

Der IE ist der schwarz-weiss Fernseher des Web

http://home.snafu.de/wumpus/rdfmu46.jpg

IE bis Version 8 moderne Browser

http://www.home-cinema-news.de/bilder/news/d_000474_01_de.jpg

konkreter, sinnvoller Anwendungsfall

http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html

runde Ecken

Runde Ecken auch für Bilder

http://jsfiddle.net/Flocke/5uQX5/

Unterschiedliche Rundungen

Runde Ecken für IE ≤ 8

http://www.vertexwerks.com/tests/sidebox/

Wartungshölle

‣ Für jede Farbe eine eigene Grafik (auch für hover bei Links!)

‣ Runde Ecken auf Verläufen oder Transparenzen sind ganz übel als Grafik

‣ Jede Änderung und Anpassung geschieht in Photoshop/Fireworks

‣ Viele Requests

‣ Keine Skalierung

http://jsfiddle.net/Flocke/9mgm7/

Rom, die Frisur hält

‣ Auch für Bilder!

‣ Auch auf Verläufen!

‣ Auch in em oder %!

‣ Schatten für Bilder

‣ maximale Flexibilität!

Schatten

http://jsfiddle.net/Flocke/FSH99/

box-shadow

text-shadow

http://jsfiddle.net/Flocke/BzAg7/

http://www.bountybev.com/

Verläufe

http://jsfiddle.net/Flocke/jGFWk/

Verlauf - gibt es auch für den IE

http://jsfiddle.net/Flocke/jGFWk/

Einfacher Verlauf mit Alternativen

http://www.colorzilla.com/gradient-editor/

Buttons mit CSS3

http://www.webdesignerwall.com/demo/css-buttons.html

Eigenschaften für Buttons

‣ border-radius

‣ rgba()

‣ text-shadow

‣ box-shadow

‣ linear-gradient

‣ background

‣ ...

http://lab.simurai.com/css/buttons/

Animationen und Transitionen

http://forabeautifulweb.com/

http://farukat.es/ http://jsfiddle.net/Flocke/KHSsg/

http://jsfiddle.net/Flocke/s2N4q/

http://anthonycalzadilla.com/css3-ATAT/index.html

http://www.anthonycalzadilla.com/

Transform

http://media.24ways.org/2009/14/3/index.html http://24ways.org/2009/going-nuts-with-css-transitions

http://jsfiddle.net/Flocke/rdnyd/

Diverse Transformationen

http://jsfiddle.net/Flocke/uSVN5/ http://www.wait-till-i.com/2011/08/17/css-challenge-90-degree-turned-headings-in-css3-with-a-fallback/

Jens Grochtdreishttp://grochtdreis.de

http://twitter.com/Flockehttp://webkrauts.de

http://slideshare.net/Flocke669

Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/