CSS3 einsetzen in Contao

4.839 Aufrufe

Veröffentlicht am

Mit CSS3 werden heute schon viele Möglichkeiten geboten, ein ansprechendes Webdesign zu realisieren. Die Präsentation geht über CSS3 und wie man es einsetzt.
Praxisbeispiele gibt es auf http://ck2011.think-contao.de/

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.839
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.583
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

CSS3 einsetzen in Contao

  1. 1. SESSION»CSS3 einsetzen in Contao«<br />Thomas Weitzel think-contao.de<br />Peter Müller pmueller.de<br />道<br />3. Juni 2011 14 bis 15 Uhr<br />
  2. 2. Kurzvorstellung<br />Peter Müller<br />Thomas Weitzel<br />pmueller.de<br />think-contao.de<br />
  3. 3. Inhaltsübersicht<br />
  4. 4. Eine kurze Geschichte von CSS 1 bis CSS3 <br />1. Das CSS Einszweidrei<br />
  5. 5. CSS 1 und 2<br />CSS Level 1<br />W3C-Empfehlung im Dezember 1996 <br />Elemente und Inhalte gestalten<br />CSS Level 2<br />W3C-Empfehlung im Mai 1998 <br />Elemente positionieren <br />CSS Level 2 Revision 1<br />Working Draft im August 2002<br />W3C-Empfehlung 12. April 2011 <br />
  6. 6. Und was ist mit CSS3? <br />Ich freu' mich schon drauf, wenn CSS3 endlich fertig ist und ich es einsetzen kann. <br />anonymous<br />
  7. 7. CSS3 ist schon da<br />CSS Level 3<br />begonnen im April 2000<br />ist keinmonolithischer Standard <br />besteht aus zahlreichen Modulen <br />Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole…<br />w3.org/TR/css3-roadmap/#whymods<br />
  8. 8. Status der CSS3-Module <br />Quelle: css3.info/modules/ --- Stand: 7. April 2011<br />
  9. 9. Jeder so wie er kann... <br />2. Progressive Enhancement<br />
  10. 10. CSS3 kommt für mich derzeit noch nicht in Frage. <br />Es gibt noch zu viele Besucher mit alten Browsern<br />oft gelesen<br />
  11. 11. Das Web ist nicht aus Papier<br />Wir sind alle mit Papierdenken groß geworden. <br />Papierdenken<br />Der Autor einer Seite hat die vollständige Kontrolle. <br />Nach der Fertigstellung sieht die Seite bei jedem Betrachter gleich aus. <br />Im Web ist das anders. <br />Der Autor einer Seite hat keine vollständige Kontrolle. <br />Nach der Fertigstellung sieht die Seite bei jedem Betrachter anders aus. <br />It's not a bug, it's a feature. <br />
  12. 12. Papierdenken<br />+<br />Webseiten<br />=<br />Auftraggeber<br />Surfer<br />Enttäuschte Erwartungen<br />Seitenbauer<br />
  13. 13. Progressive Enhancement<br />Webseiten<br />… werden benutzt und nicht nur betrachtet. <br />… müssen nicht in jedem Browser gleich aussehen.<br />… müssen sich nicht in jedem Browser gleich verhalten.<br />Progressive Enhancement<br />Alte Browser zeigen die Seite so wie sie können. <br />Moderne Browser zeigen sie in ihrer vollen Pracht. <br />Jeder so wie er kann. <br />It's not a bug, it's a feature. <br />
  14. 14. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com <br />bit.ly/css3-cederholm <br />Unterschiedliches Verhalten ist okay. <br />
  15. 15. Im IE6 ist das alles. <br />
  16. 16. Im FF4 sieht es anfangs genauso aus. <br />
  17. 17. Maus bewegen = Sternenhimmel<br />
  18. 18. Hover on Nope. <br />
  19. 19. Klick = Greetings, modern browserpeople. <br />
  20. 20. Progressive Enhancement in den 60ern<br />Einige Programme wurden bereits in Farbe gesendet, obwohl es noch Schwarzweiß-Fernseher gab. <br />Und Leute mit einem Schwarzweiß-Gerät haben die Sendung nicht in Farbe gesehen.<br />
  21. 21. und wofür besser noch nicht... <br />3. Wofür man CSS3 einsetzen kann<br />
  22. 22. Die Browser bestimmen was geht<br />
  23. 23. Die Browser-Präfixe<br />Browser<br />Präfix<br />Layout<br />-<br />Engine<br />Safari<br />-<br />webkit<br />-<br />Webkit<br />Chrome<br />-<br />webkit<br />-<br />Webkit<br />Firefox<br />-<br />moz<br />-<br />Gecko <br />Opera<br />-<br />o<br />-<br />Presto <br />Internet Explorer<br />-<br />ms<br />-<br />Trident<br />
  24. 24. CSS3 - in Zukunft<br />Mehrspaltige Layouts<br />»Multi-column Layout Module«(Candidate Recommendation)<br />»Template Layout Module«(Working Draft)<br />»Flexible Box Layout Module«(Working Draft) <br />»Grid Modules«Ideenzu Positioning und Layout<br />Aktueller Stand auf w3.org/Style/CSS/current-work<br />Floatbasierte Layouts begleitenunsnocheinStück des Weges<br />
  25. 25. CSS3 im Hier und Jetzt<br />CSS3 statt Grafik <br />Abgerundete Ecken <br />Schlagschatten<br />Lineare Farbverläufe <br />Transparenzen<br />Unschärfe <br />Transformationen <br />Contao V2.10 <br />Einige CSS3-Eigenschaften werden im internen CSS3-Editor integriert. <br />Alte IE-Versionen werden automatisch mit CSS3-Pie versorgt. <br />
  26. 26. Vielen Dank für Ihre Aufmerksamkeit.<br />道<br />Praxisbeispiele auf ck2011.think-contao.de <br />

×