Embed Size (px)
Citation preview
A kind of Magic -CSS für
FortgeschritteneWordCamp 2015 BerlinChristoph Daum
Christoph DaumHead of IT bei UNIQ
www.un-iq.dewww.christoph-daum.de
Bad Practice
Bildwechsel per JavaScript
Bildwechsel ohne Sprite
Falsche Bildformate
Nicht optimierte Grafiken
Verläufe/Schatten als Grafik
CSS für Fortgeschrittene
1.CSS-Sprites
2.Icon-Fonts
3.Retina/HiRes Optimierung
4.Anregungen zur Vertiefung
CSS-SpritesWas sind das eigentlich, und was bringen sie mir
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
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
Icon-FontsWeb-Fonts die verrückt spielen
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
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
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
Retina OptimierungWebseiten 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 CSS Gradients Sprite Animation mit step()
Multiple Box-Shadows rem calc vw,vh,min,vmax
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
Fragen?
