CSS3Jens Grochtdreis
Welche Lücke füllt CSS3?
Moving from hacks to                         solutionhttp://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solu...
neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen       Verringerung des        Grafikeinsatzes            ...
Transparenz     mit rgba()                   runde Ecken                         Verläufe (gradient)Transitions           ...
Die Vorteile‣ Weniger Schmuckbilder werden benötigt.‣ Weniger Javascript wird benötigt.‣ Animationen und Transitionen sind...
Die NachteileEs 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...
Kann ich CSS3 schon heute         nutzen?
JEIN
Manche neuen Eigenschaften                  Text implementiert.sind in keinem Browser
Funktioniert das                                                    auch im IE?http://www.sts.tu-harburg.de/projects/WEL/0...
http://www.findmebyip.com/litmus/
http://www.findmebyip.com/litmus/
Microsoft ist der Bremsklotz      des Fortschritts
Aber nur, wenn wir uns   bremsen lassen!
Alte IE-Versionen ...http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
http://workdiary.de/
Der IE ist der schwarz-weiss    Fernseher des Web         IE bis Version 8                                   moderne Brows...
konkreter, sinnvoller  Anwendungsfall
http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
runde Ecken
Runde Ecken auch für Bilder
Unterschiedliche Rundungenhttp://jsfiddle.net/Flocke/5uQX5/
Runde Ecken für IE ≤ 8http://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...
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
box-shadowhttp://jsfiddle.net/Flocke/FSH99/
text-shadowhttp://jsfiddle.net/Flocke/BzAg7/
http://www.bountybev.com/
Verläufe
Verlauf -                  gibt es auch für den IEhttp://jsfiddle.net/Flocke/jGFWk/
Einfacher Verlauf mit                           Alternativenhttp://jsfiddle.net/Flocke/jGFWk/       http://www.colorzilla.c...
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
Diverse Transformationenhttp://jsfiddle.net/Flocke/rdnyd/
http://jsfiddle.net/Flocke/uSVN5/   http://www.wait-till-i.com/2011/08/17/css-challenge-90-degree-turned-headings-in-css3-w...
Jens Grochtdreis                                                     http://grochtdreis.de                                ...
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Nächste SlideShare
Wird geladen in …5
×

Kleiner Blick auf CSS3

1.834 Aufrufe

Veröffentlicht am

Ein kleiner Blick auf CSS, Session auf dem Barcamp Mainz 2011

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.834
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Kleiner Blick auf CSS3

  1. 1. CSS3Jens Grochtdreis
  2. 2. Welche Lücke füllt CSS3?
  3. 3. Moving from hacks to solutionhttp://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/
  4. 4. neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
  5. 5. Transparenz mit rgba() runde Ecken Verläufe (gradient)Transitions media-queries calc() mehrere Spalten
  6. 6. 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.
  7. 7. Die NachteileEs gibt keine!
  8. 8. Naja, vielleicht einen kleinen
  9. 9. Evolution, nicht Revolution
  10. 10. ‣ CSS3 baut auf CSS2 auf‣ Browser ignoriert einfach unbekannte Eigenschaften: graceful degredation‣ Gibt echte Lösungen für immer wiederkehrende Designprobleme
  11. 11. Kann ich CSS3 schon heute nutzen?
  12. 12. JEIN
  13. 13. Manche neuen Eigenschaften Text implementiert.sind in keinem Browser
  14. 14. Funktioniert das auch im IE?http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
  15. 15. http://www.findmebyip.com/litmus/
  16. 16. http://www.findmebyip.com/litmus/
  17. 17. Microsoft ist der Bremsklotz des Fortschritts
  18. 18. Aber nur, wenn wir uns bremsen lassen!
  19. 19. Alte IE-Versionen ...http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
  20. 20. http://workdiary.de/
  21. 21. Der IE ist der schwarz-weiss Fernseher des Web IE bis Version 8 moderne Browserhttp://home.snafu.de/wumpus/rdfmu46.jpg http://www.home-cinema-news.de/bilder/news/d_000474_01_de.jpg
  22. 22. konkreter, sinnvoller Anwendungsfall
  23. 23. http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
  24. 24. runde Ecken
  25. 25. Runde Ecken auch für Bilder
  26. 26. Unterschiedliche Rundungenhttp://jsfiddle.net/Flocke/5uQX5/
  27. 27. Runde Ecken für IE ≤ 8http://www.vertexwerks.com/tests/sidebox/
  28. 28. 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
  29. 29. http://jsfiddle.net/Flocke/9mgm7/
  30. 30. Rom, die Frisur hält‣ Auch für Bilder!‣ Auch auf Verläufen!‣ Auch in em oder %!‣ Schatten für Bilder‣ maximale Flexibilität!
  31. 31. Schatten
  32. 32. box-shadowhttp://jsfiddle.net/Flocke/FSH99/
  33. 33. text-shadowhttp://jsfiddle.net/Flocke/BzAg7/
  34. 34. http://www.bountybev.com/
  35. 35. Verläufe
  36. 36. Verlauf - gibt es auch für den IEhttp://jsfiddle.net/Flocke/jGFWk/
  37. 37. Einfacher Verlauf mit Alternativenhttp://jsfiddle.net/Flocke/jGFWk/ http://www.colorzilla.com/gradient-editor/
  38. 38. Buttons mit CSS3
  39. 39. http://www.webdesignerwall.com/demo/css-buttons.html
  40. 40. Eigenschaften für Buttons‣ border-radius‣ rgba()‣ text-shadow‣ box-shadow‣ linear-gradient‣ background‣ ...
  41. 41. http://lab.simurai.com/css/buttons/
  42. 42. Animationen und Transitionen
  43. 43. http://forabeautifulweb.com/
  44. 44. http://farukat.es/ http://jsfiddle.net/Flocke/KHSsg/
  45. 45. http://jsfiddle.net/Flocke/s2N4q/
  46. 46. http://anthonycalzadilla.com/css3-ATAT/index.html
  47. 47. http://www.anthonycalzadilla.com/
  48. 48. Transform
  49. 49. http://media.24ways.org/2009/14/3/index.html http://24ways.org/2009/going-nuts-with-css-transitions
  50. 50. Diverse Transformationenhttp://jsfiddle.net/Flocke/rdnyd/
  51. 51. 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/
  52. 52. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×