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

633 Aufrufe

Veröffentlicht am

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

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

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
633
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Vorstellung Person

    Urlaubsguru
    Erste Gehversuche im Web 95
    Seit 2009 vollberuflich im Web tätig
    Seit 2012 vorrangig WordPress
    Seit 2014 Inhouse Entwickler
  • Beispiel aus der Praxis, Video in Echtzeit, bei simulierter Mobilfunkverbindung
    Bildwechsel findet per CSS ohne Sprite und ohne Preload statt, es werden allein für dieses Menü 10 Grafiken geladen
    Nachteile: Erhöhte Ladezeiten, schlechte User Experience durch „flackern“ beim ersten laden

    Das ist ungefähr so praktisch wie das Braune Zeug in den Pampers meines Sohns
  • PNG24 für halbtransperenzen, also falls grafiken nicht immer auf dem gleichen Untergrund liegen.
    GIF Für Grafiken mit wenigen Farben und ggf einer Volltranzparenz
    SVG für Vektorgrafiken
    JPG für alles andere

    Andere Formate haben im Web nichts verloren
  • Vorlage für PNG Sprite
  • Facebook Icons, Thermometer
  • EOT für Internet Explorer
    WOFF Chrome & Firefox
    TTF/OTF alle Modernen Browser, IE ab 9
    SVG Font, Support mittlerweile bei Chrome eingestellt, nur noch für Safari und Safari Mobile


    Tricksreferenz: IconVault mit Forecast Font, Thermo Icons
  • Ähnlich zu Fontello - IcoMoon

    Fontello erlaubt das „zusammenklicken“ individueller Iconfonts, sowie den Upload eigener Icons
  • Lea Verou ist ein Engel der Programmierung

    14:45 Lightnight Talks SCSS Zaubertricks Friedhelm Oja
  • 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?

    ×