Kleiner Blick auf CSS3

1,534
-1

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,534
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×