Kleiner Blick auf CSS3
0 gefällt mir977 aufrufe
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
- 4. Welche Lücke füllt CSS3?
- 5. Moving from hacks to 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öglichkeiten mit 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 ‣ 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.
- 9. Die Nachteile Es gibt keine!
- 10. Naja, vielleicht einen kleinen
- 12. ‣ CSS3 baut auf CSS2 auf ‣ Browser ignoriert einfach unbekannte Eigenschaften: graceful degredation ‣ Gibt echte Lösungen für immer wiederkehrende Designprobleme
- 13. Kann ich CSS3 schon heute nutzen?
- 14. JEIN
- 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
- 19. Microsoft ist der Bremsklotz des Fortschritts
- 20. Aber nur, wenn wir uns bremsen lassen!
- 23. Der IE ist der 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
- 26. runde Ecken
- 27. Runde Ecken auch für Bilder
- 29. Runde Ecken für IE ≤ 8 http://www.vertexwerks.com/tests/sidebox/
- 30. 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
- 32. Rom, die Frisur hält ‣ Auch für Bilder! ‣ Auch auf Verläufen! ‣ Auch in em oder %! ‣ Schatten für Bilder ‣ maximale Flexibilität!
- 33. Schatten
- 38. Verläufe
- 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. Buttons mit CSS3
- 43. Eigenschaften für Buttons ‣ border-radius ‣ rgba() ‣ text-shadow ‣ box-shadow ‣ linear-gradient ‣ background ‣ ...
- 45. Animationen und Transitionen
- 47. http://farukat.es/ http://jsfiddle.net/Flocke/KHSsg/
- 51. Transform
- 52. http://media.24ways.org/2009/14/3/index.html http://24ways.org/2009/going-nuts-with-css-transitions
- 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/