Kleiner Blick auf CSS3

  • Published on
    22-May-2015

  • View
    1.361

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Transcript

  • 1. CSS3Jens Grochtdreis

2. Welche Lcke fllt CSS3? 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. neue Layoutmodellemehr Mglichkeiten mit Rahmen und Hintergrnden Verringerung desGrakeinsatzesAnimationen neue Selektoren 5. Transparenz mit rgba() runde Ecken Verlufe (gradient)Transitionsmedia-queries calc() mehrere Spalten 6. Die Vorteile Weniger Schmuckbilder werden bentigt. Weniger Javascript wird bentigt. Animationen und Transitionen sind mittels CSSschneller, als mittels Javascript. Es wird seltener Code nur fr Optik bentigt,der Quellcode schmaler und lesbarer. 7. Die NachteileEs gibt keine! 8. Naja, vielleicht einen kleinen 9. Evolution, nicht Revolution 10. CSS3 baut auf CSS2 auf Browser ignoriert einfach unbekannteEigenschaften: graceful degredation Gibt echte Lsungen fr immerwiederkehrende Designprobleme 11. Kann ich CSS3 schon heute nutzen? 12. JEIN 13. Manche neuen EigenschaftenText implementiert.sind in keinem Browser 14. Funktioniert dasauch im IE?http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg 15. http://www.ndmebyip.com/litmus/ 16. http://www.ndmebyip.com/litmus/ 17. Microsoft ist der Bremsklotzdes Fortschritts 18. Aber nur, wenn wir uns bremsen lassen! 19. Alte IE-Versionen ...http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg 20. http://workdiary.de/ 21. Der IE ist der schwarz-weissFernseher 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. konkreter, sinnvollerAnwendungsfall 23. http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html 24. runde Ecken 25. Runde Ecken auch fr Bilder 26. Unterschiedliche Rundungenhttp://jsddle.net/Flocke/5uQX5/ 27. Runde Ecken fr IE 8http://www.vertexwerks.com/tests/sidebox/ 28. Wartungshlle Fr jede Farbe eine eigene Grak (auch fr hover beiLinks!) Runde Ecken auf Verlufen oder Transparenzen sind ganzbel als Grak Jede nderung und Anpassung geschieht in Photoshop/Fireworks Viele Requests Keine Skalierung 29. http://jsddle.net/Flocke/9mgm7/ 30. Rom, die Frisur hlt Auch fr Bilder! Auch auf Verlufen! Auch in em oder %! Schatten fr Bilder maximale Flexibilitt! 31. Schatten 32. box-shadowhttp://jsddle.net/Flocke/FSH99/ 33. text-shadowhttp://jsddle.net/Flocke/BzAg7/ 34. http://www.bountybev.com/ 35. Verlufe 36. Verlauf -gibt es auch fr den IEhttp://jsddle.net/Flocke/jGFWk/ 37. Einfacher Verlauf mit Alternativenhttp://jsddle.net/Flocke/jGFWk/ http://www.colorzilla.com/gradient-editor/ 38. Buttons mit CSS3 39. http://www.webdesignerwall.com/demo/css-buttons.html 40. Eigenschaften fr Buttons border-radius rgba() text-shadow box-shadow linear-gradient background ... 41. http://lab.simurai.com/css/buttons/ 42. Animationen undTransitionen 43. http://forabeautifulweb.com/ 44. http://farukat.es/ http://jsddle.net/Flocke/KHSsg/ 45. http://jsddle.net/Flocke/s2N4q/ 46. http://anthonycalzadilla.com/css3-ATAT/index.html 47. http://www.anthonycalzadilla.com/ 48. Transform 49. http://media.24ways.org/2009/14/3/index.html http://24ways.org/2009/going-nuts-with-css-transitions 50. Diverse Transformationenhttp://jsddle.net/Flocke/rdnyd/ 51. http://jsddle.net/Flocke/uSVN5/ http://www.wait-till-i.com/2011/08/17/css-challenge-90-degree-turned-headings-in-css3-with-a-fallback/ 52. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flockehttp://webkrauts.dehttp://slideshare.net/Flocke669Diese Prsentation steht unterder Creative Commons LizenzAttribution-ShareAlike 2.0http://creativecommons.org/licenses/by-sa/2.0/de/

Recommended

View more >