Kleiner Blick auf CSS3

1.887 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.887
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/

×