Download pdf - Kleiner Blick auf CSS3

Transcript
Page 1: Kleiner Blick auf CSS3

CSS3Jens Grochtdreis

Page 2: Kleiner Blick auf CSS3
Page 3: Kleiner Blick auf CSS3
Page 4: Kleiner Blick auf CSS3

Welche Lücke füllt CSS3?

Page 5: Kleiner Blick auf 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/

Page 6: Kleiner Blick auf CSS3

Animationen

Verringerung des Grafikeinsatzes

neue Layoutmodelle

mehr Möglichkeiten mit Rahmen und Hintergründen

neue Selektoren

Page 7: Kleiner Blick auf CSS3

runde Ecken

Verläufe (gradient)

Transitions

mehrere Spaltencalc()

Transparenz mit rgba()

media-queries

Page 8: Kleiner Blick auf CSS3

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.

Page 9: Kleiner Blick auf CSS3

Die Nachteile

Es gibt keine!

Page 10: Kleiner Blick auf CSS3

Naja, vielleicht einen kleinen

Page 11: Kleiner Blick auf CSS3

Evolution, nicht Revolution

Page 12: Kleiner Blick auf CSS3

‣ CSS3 baut auf CSS2 auf

‣ Browser ignoriert einfach unbekannte Eigenschaften: graceful degredation

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

Page 13: Kleiner Blick auf CSS3

Kann ich CSS3 schon heute nutzen?

Page 14: Kleiner Blick auf CSS3

JEIN

Page 15: Kleiner Blick auf CSS3

TextManche neuen Eigenschaften

sind in keinem Browser implementiert.

Page 16: Kleiner Blick auf CSS3

Funktioniert das auch im IE?

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

Page 19: Kleiner Blick auf CSS3

Microsoft ist der Bremsklotz des Fortschritts

Page 20: Kleiner Blick auf CSS3

Aber nur, wenn wir uns bremsen lassen!

Page 21: Kleiner Blick auf CSS3

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

Alte IE-Versionen ...

Page 22: Kleiner Blick auf CSS3

http://workdiary.de/

Page 23: Kleiner Blick auf CSS3

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

Page 24: Kleiner Blick auf CSS3

konkreter, sinnvoller Anwendungsfall

Page 26: Kleiner Blick auf CSS3

runde Ecken

Page 27: Kleiner Blick auf CSS3

Runde Ecken auch für Bilder

Page 28: Kleiner Blick auf CSS3

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

Unterschiedliche Rundungen

Page 29: Kleiner Blick auf CSS3

Runde Ecken für IE ≤ 8

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

Page 30: Kleiner Blick auf CSS3

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

Page 32: Kleiner Blick auf CSS3

Rom, die Frisur hält

‣ Auch für Bilder!

‣ Auch auf Verläufen!

‣ Auch in em oder %!

‣ Schatten für Bilder

‣ maximale Flexibilität!

Page 33: Kleiner Blick auf CSS3

Schatten

Page 34: Kleiner Blick auf CSS3

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

box-shadow

Page 35: Kleiner Blick auf CSS3
Page 36: Kleiner Blick auf CSS3

text-shadow

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

Page 37: Kleiner Blick auf CSS3

http://www.bountybev.com/

Page 38: Kleiner Blick auf CSS3

Verläufe

Page 39: Kleiner Blick auf CSS3

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

Verlauf - gibt es auch für den IE

Page 40: Kleiner Blick auf CSS3

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

Einfacher Verlauf mit Alternativen

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

Page 41: Kleiner Blick auf CSS3

Buttons mit CSS3

Page 43: Kleiner Blick auf CSS3

Eigenschaften für Buttons

‣ border-radius

‣ rgba()

‣ text-shadow

‣ box-shadow

‣ linear-gradient

‣ background

‣ ...

Page 45: Kleiner Blick auf CSS3

Animationen und Transitionen

Page 46: Kleiner Blick auf CSS3

http://forabeautifulweb.com/

Page 51: Kleiner Blick auf CSS3

Transform

Page 53: Kleiner Blick auf CSS3

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

Diverse Transformationen

Page 55: Kleiner Blick auf CSS3
Page 56: Kleiner Blick auf CSS3

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/


Recommended