Download - A kind of magic - CSS für Fortgeschrittene
![Page 1: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/1.jpg)
A kind of Magic -CSS für
FortgeschritteneWordCamp 2015 BerlinChristoph Daum
![Page 2: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/2.jpg)
Christoph DaumHead of IT bei UNIQ
www.un-iq.dewww.christoph-daum.de
![Page 3: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/3.jpg)
![Page 4: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/4.jpg)
Bad Practice
Bildwechsel per JavaScript
Bildwechsel ohne Sprite
Falsche Bildformate
Nicht optimierte Grafiken
Verläufe/Schatten als Grafik
![Page 5: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/5.jpg)
CSS für Fortgeschrittene
1.CSS-Sprites
2.Icon-Fonts
3.Retina/HiRes Optimierung
4.Anregungen zur Vertiefung
![Page 6: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/6.jpg)
CSS-SpritesWas sind das eigentlich, und was bringen sie mir
![Page 7: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/7.jpg)
CSS-SpritesCSS-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
![Page 8: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/8.jpg)
![Page 9: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/9.jpg)
CSS-Sprites im Überblick
Beliebige Farben
Weniger Dateiaufrufe
Geringe Dateigröße
Kein „Flackern“ bei Bildwechseln
Nicht (automatisch) Retina-Optimiert
Animationen komplex/gewöhnungsbedürftig
Vorteile Nachteile
![Page 10: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/10.jpg)
Icon-FontsWeb-Fonts die verrückt spielen
![Page 11: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/11.jpg)
Icon-FontsIcon-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
![Page 12: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/12.jpg)
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
![Page 13: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/13.jpg)
BeispieleFont AwesomeEine der bekanntesten Icon Fonthttp://fontawesome.io/
Ligature SymbolsIcon Font die Ligaturen nutzthttp://kudakurage.com/ligature_symbols/
FontelloWebservice zum erstellen individueller Icon Fontshttp://fontello.com
![Page 14: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/14.jpg)
![Page 15: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/15.jpg)
![Page 16: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/16.jpg)
Retina OptimierungWebseiten für die schönsten Displays rausputzen
Bildquelle: html5-mobile.de
![Page 17: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/17.jpg)
Retina Optimierung
Icon-Fonts
Responsive Images
Media Queries
-webkit-image-set
SVG
![Page 18: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/18.jpg)
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
![Page 19: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/19.jpg)
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
![Page 21: A kind of magic - CSS für Fortgeschrittene](https://reader036.vdocuments.net/reader036/viewer/2022070513/5885ba2c1a28ab6f168b5671/html5/thumbnails/21.jpg)
Fragen?