13-mal heruntergeladen
Hochgeladen vonJens Grochtdreis
Kleiner Blick auf CSS3
CSS3 bietet zahlreiche neue Layoutmöglichkeiten, reduzierte Abhängigkeit von Grafiken und JavaScript sowie verbesserte Animationen und Übergänge. Es löst viele gängige Designprobleme und verbessert die Lesbarkeit des Codes. Trotz der Herausforderungen bezüglich der Browserunterstützung, insbesondere bei älteren Internet Explorer-Versionen, zeigt CSS3 grundlegende Vorteile in der Webentwicklung.
Kleiner Blick auf CSS3
- 1.
- 4. Welche Lücke fülltCSS3?
- 5. Moving from hacksto solution http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/
- 6. neue Layoutmodelle mehr Möglichkeitenmit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
- 7. Transparenz mit rgba() runde Ecken Verläufe (gradient) Transitions media-queries calc() mehrere Spalten
- 8. Die Vorteile ‣ WenigerSchmuckbilder 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.
- 9. Die Nachteile Es gibtkeine!
- 10. Naja, vielleicht einenkleinen
- 11.
- 12. ‣ CSS3 bautauf CSS2 auf ‣ Browser ignoriert einfach unbekannte Eigenschaften: graceful degredation ‣ Gibt echte Lösungen für immer wiederkehrende Designprobleme
- 13. Kann ich CSS3schon heute nutzen?
- 14.
- 15. Manche neuen Eigenschaften Text implementiert. sind in keinem Browser
- 16. Funktioniert das auch im IE? http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
- 17.
- 18.
- 19. Microsoft ist derBremsklotz des Fortschritts
- 20. Aber nur, wennwir uns bremsen lassen!
- 21.
- 22.
- 23. Der IE istder schwarz-weiss Fernseher des Web IE bis Version 8 moderne Browser http://home.snafu.de/wumpus/rdfmu46.jpg http://www.home-cinema-news.de/bilder/news/d_000474_01_de.jpg
- 24. konkreter, sinnvoller Anwendungsfall
- 25.
- 26.
- 27. Runde Ecken auchfür Bilder
- 28.
- 29. Runde Ecken fürIE ≤ 8 http://www.vertexwerks.com/tests/sidebox/
- 30. Wartungshölle ‣ Für jedeFarbe 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
- 31.
- 32. Rom, die Frisurhält ‣ Auch für Bilder! ‣ Auch auf Verläufen! ‣ Auch in em oder %! ‣ Schatten für Bilder ‣ maximale Flexibilität!
- 33.
- 34.
- 36.
- 37.
- 38.
- 39. Verlauf - gibt es auch für den IE http://jsfiddle.net/Flocke/jGFWk/
- 40. Einfacher Verlauf mit Alternativen http://jsfiddle.net/Flocke/jGFWk/ http://www.colorzilla.com/gradient-editor/
- 41.
- 42.
- 43. Eigenschaften für Buttons ‣border-radius ‣ rgba() ‣ text-shadow ‣ box-shadow ‣ linear-gradient ‣ background ‣ ...
- 44.
- 45. Animationen und Transitionen
- 46.
- 47. http://farukat.es/ http://jsfiddle.net/Flocke/KHSsg/
- 48.
- 49.
- 50.
- 51.
- 52. http://media.24ways.org/2009/14/3/index.html http://24ways.org/2009/going-nuts-with-css-transitions
- 53.
- 54. 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/
- 56. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://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/