O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

A kind of magic - CSS für Fortgeschrittene

764 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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?

×