A kind of Magic -
CSS für Fortgeschrittene
WordCamp 2015 Berlin
Christoph Daum
Christoph
Daum
Head of IT bei UNIQ
www.un-iq.de
www.christoph-daum.de
Bad Practice
Bildwechsel per JavaScript
Bildwechsel ohne Sprite
Falsche Bildformate
Nicht optimierte Grafiken
Verläufe/Sch...
CSS für Fortgeschrittene
1.CSS-Sprites
2.Icon-Fonts
3.Retina/HiRes Optimierung
4.Anregungen zur Vertiefung
CSS-Sprites
Was sind das
eigentlich, und was
bringen sie mir
CSS-Sprites
CSS-Sprites bezeichnet eine einzelne
Grafikdatei, die viele Symbole und Icons
enthält. Diese zusammengefassten...
CSS-Sprites im Überblick
Beliebige Farben
Weniger Dateiaufrufe
Geringe Dateigröße
Kein „Flackern“ bei
Bildwechseln
Nicht (...
Icon-Fonts
Web-Fonts die verrückt
spielen
Icon-Fonts
Icon-Fonts sind Webfonts, die Icons statt
Buchstaben darstellen und vor allem als
funktionale Piktogramme verwe...
Icon-Fonts im Überblick
Vektorbasiert
Größenwechsel
Farbwechsel
Geringe Dateigröße
Nur Einfarbig*
Mehrere Dateiformate
not...
Beispiele
Font Awesome
Eine der bekanntesten Icon Font
http://fontawesome.io/
Ligature Symbols
Icon Font die Ligaturen nut...
Retina
Optimierung
Webseiten für die
schönsten Displays
rausputzen
Bildquelle: html5-mobile.de
Retina Optimierung
Icon-Fonts
Responsive Images
Media Queries
-webkit-image-set
SVG
Anregungen zur Vertiefung
CSS Minify Data URIs Responsive Images
SVG Sprites CSS Animations CSS Transitions
Pointer-Events...
Links
• http://caniuse.com/
• https://css-tricks.com
• http://lea.verou.me/
• http://leaverou.github.com/animatable
• http...
Vielen Dank
c.daum@me.com
www.christoph-daum.de
Fragen?
A kind of magic - CSS für Fortgeschrittene
A kind of magic - CSS für Fortgeschrittene
A kind of magic - CSS für Fortgeschrittene
A kind of magic - CSS für Fortgeschrittene
Nächste SlideShare
Wird geladen in …5
×

A kind of magic - CSS für Fortgeschrittene

712 Aufrufe

Veröffentlicht am

Mein Vortrag zum Thema CSS für Fortgeschrittene auf dem WordCamp 2015 in Berlin

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

A kind of magic - CSS für Fortgeschrittene

  1. 1. A kind of Magic - CSS für Fortgeschrittene WordCamp 2015 Berlin Christoph Daum
  2. 2. Christoph Daum Head of IT bei UNIQ www.un-iq.de www.christoph-daum.de
  3. 3. Bad Practice Bildwechsel per JavaScript Bildwechsel ohne Sprite Falsche Bildformate Nicht optimierte Grafiken Verläufe/Schatten als Grafik
  4. 4. CSS für Fortgeschrittene 1.CSS-Sprites 2.Icon-Fonts 3.Retina/HiRes Optimierung 4.Anregungen zur Vertiefung
  5. 5. CSS-Sprites Was sind das eigentlich, und was bringen sie mir
  6. 6. CSS-Sprites CSS-Sprites bezeichnet eine einzelne Grafikdatei, die viele Symbole und Icons enthält. Diese zusammengefassten Grafiken fungieren als Sprites und dienen dazu, die Ladezeit von Webseiten zu minimieren. Die einzelnen Elemente dieser Gesamtgrafik werden mit der CSS-Eigenschaft background- image und background-position ein- beziehungsweise ausgeblendet. Quelle: https://de.wikipedia.org/wiki/CSS-Sprites
  7. 7. CSS-Sprites im Überblick Beliebige Farben Weniger Dateiaufrufe Geringe Dateigröße Kein „Flackern“ bei Bildwechseln Nicht (automatisch) Retina-Optimiert Animationen komplex/gewöhnungsbe dürftig Vorteile Nachteile
  8. 8. Icon-Fonts Web-Fonts die verrückt spielen
  9. 9. Icon-Fonts Icon-Fonts sind Webfonts, die Icons statt Buchstaben darstellen und vor allem als funktionale Piktogramme verwendet werden. Sie sind ein Alternative zu reinen Bilddatei oder CSS-Sprites. Da Icon-Fonts meist als Vektorschriften angelegt werden, können diese grafisch skalieren und haben eine geringere Dateigröße als Pixel-Icons. Quelle: https://de.wikipedia.org/wiki/Webtypografie#Icon-Fonts
  10. 10. Icon-Fonts im Überblick Vektorbasiert Größenwechsel Farbwechsel Geringe Dateigröße Nur Einfarbig* Mehrere Dateiformate notwendig Darstellung Browser/OS abhängig Vorteile Nachteile * Mit Tricks bis zu 3 Farben plus Hintergrund
  11. 11. Beispiele Font Awesome Eine der bekanntesten Icon Font http://fontawesome.io/ Ligature Symbols Icon Font die Ligaturen nutzt http://kudakurage.com/ligature_symbols/ Fontello Webservice zum erstellen individueller Icon Fonts http://fontello.com
  12. 12. Retina Optimierung Webseiten für die schönsten Displays rausputzen Bildquelle: html5-mobile.de
  13. 13. Retina Optimierung Icon-Fonts Responsive Images Media Queries -webkit-image-set SVG
  14. 14. Anregungen zur Vertiefung CSS Minify Data URIs Responsive Images SVG Sprites CSS Animations CSS Transitions Pointer-Events CSS Gradients Sprite Animation mit step() Multiple Box-Shadows rem calc vw,vh,min,vmax
  15. 15. Links • http://caniuse.com/ • https://css-tricks.com • http://lea.verou.me/ • http://leaverou.github.com/animatable • http://lesscss.org/ • http://sass-lang.com/ • http://forecastfont.iconvau.lt/ • http://generatewp.com
  16. 16. Vielen Dank c.daum@me.com www.christoph-daum.de
  17. 17. Fragen?

×