Post on 22-May-2015
description
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 ...
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/
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://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/