Ikonfontok a mai weben
BOKROS GYÖRGY
@hipra
13. szeptember 18., szerda
“Egyszerű szimbólumokat csomagolunk
fontkészletbe, hogy a weben GUI
elemekként jelenítsük meg őket.”
- Captain Obvious
13....
1997: WEBDINGS
Vincent Connare, Sue Lightfoot,Ian Patterson, Geraldine Wade
13. szeptember 18., szerda
1990:
WINGDINGS
NYC
1997:
WEBDINGS
NYC
13. szeptember 18., szerda
HASZNÁLJUK?
MIÉRT
13. szeptember 18., szerda
MIÉRT HASZNÁLJUK?
1; Ugyanolyan vektoros elemek, mint a betűk, bármekkorára nagyíthatók
minőségromlás nélkül.
13. szeptemb...
MIÉRT HASZNÁLJUK?
2; Könnyen bővíthető, alakítható, mindenki jól jár vele:
• kevesebb designeri erőforrás szükséges, nem k...
MIÉRT HASZNÁLJUK?
3; Ugyanazok a CSS-szabályok érvényesek rájuk,
mint a normál betűkre, vagyis egyszerűen lehet:
• színezn...
MIÉRT HASZNÁLJUK?
5; Illeszkedik az aktuális trendekhez:
• reszponzív design
• a böngésző a webdesigner eszköze, nem a Pho...
SEMMI SEM
TÖKÉLETES...
13. szeptember 18., szerda
SEMMI SEMTÖKÉLETES...
1; Időrabló és komplex feladat, hogy “normál” pixelsűrűségű
eszközön jól mutasson, igazán jó végered...
SEMMI SEMTÖKÉLETES...
2; Renderelési különbségek böngészők és op. rendszerek között.
Win 7
IE 10
Win 8
IE 10
Win 8
Chrome ...
SEMMI SEMTÖKÉLETES...
Win 7
IE 10
OS X
Chrome 29
OS X
Firefox 23
iOS 7
Ezek a problémák nagy pixelsűrűségű eszközökön megs...
SEMMI SEMTÖKÉLETES...
3; Csak egyszínű ikonokat használhatunk
OH, WAIT!
13. szeptember 18., szerda
SEMMI SEMTÖKÉLETES... forecastfont.iconvau.lt/
13. szeptember 18., szerda
MOST MÁR CSINÁLJUNK
VÉGRE VALAMIT!!!
13. szeptember 18., szerda
http://icomoon.io
13. szeptember 18., szerda
http://icomoon.io
13. szeptember 18., szerda
http://icomoon.io
13. szeptember 18., szerda
http://icomoon.io
13. szeptember 18., szerda
Az Icomoon által generált font formátumok:
13. szeptember 18., szerda
13. szeptember 18., szerda
OKÉ, KÉSZ A FONT,
ÉS MOST???
13. szeptember 18., szerda
Az ikonfontunk markupja
1; data- tulajdonság használatával:
2; class használatával:
13. szeptember 18., szerda
style.css
13. szeptember 18., szerda
style.css
13. szeptember 18., szerda
style.css
13. szeptember 18., szerda
style.css
13. szeptember 18., szerda
Példa:Markup:
CSS:
13. szeptember 18., szerda
Példa:
13. szeptember 18., szerda
Példa:
13. szeptember 18., szerda
HA MÉG BÍRJÁTOK:
MULTILAYERES IKONOK
13. szeptember 18., szerda
A kívánt végeredmény:
13. szeptember 18., szerda
A két ikon Illustratorban, 512x512 px-es canvason,
32-es griddel, pontosan ráigazítva
13. szeptember 18., szerda
A markup:
A CSS:
13. szeptember 18., szerda
Még nem tökéletes:
13. szeptember 18., szerda
Vissza a CSS-hez:
13. szeptember 18., szerda
13. szeptember 18., szerda
B-változat:
Multilayeres, de csak egyszínű
A CSS:
13. szeptember 18., szerda
13. szeptember 18., szerda
A témában még:
http://fontello.com/
http://fortawesome.github.io/Font-Awesome/
http://fontastic.me/
http://icomoon.io/
Let...
Upcoming SlideShare
Loading in …5
×

Ikonfontok a mai weben

629 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
629
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ikonfontok a mai weben

  1. 1. Ikonfontok a mai weben BOKROS GYÖRGY @hipra 13. szeptember 18., szerda
  2. 2. “Egyszerű szimbólumokat csomagolunk fontkészletbe, hogy a weben GUI elemekként jelenítsük meg őket.” - Captain Obvious 13. szeptember 18., szerda
  3. 3. 1997: WEBDINGS Vincent Connare, Sue Lightfoot,Ian Patterson, Geraldine Wade 13. szeptember 18., szerda
  4. 4. 1990: WINGDINGS NYC 1997: WEBDINGS NYC 13. szeptember 18., szerda
  5. 5. HASZNÁLJUK? MIÉRT 13. szeptember 18., szerda
  6. 6. MIÉRT HASZNÁLJUK? 1; Ugyanolyan vektoros elemek, mint a betűk, bármekkorára nagyíthatók minőségromlás nélkül. 13. szeptember 18., szerda
  7. 7. MIÉRT HASZNÁLJUK? 2; Könnyen bővíthető, alakítható, mindenki jól jár vele: • kevesebb designeri erőforrás szükséges, nem kell külön “retinás” (@2x) verziót készíteni minden grafikai elemből, ami hosszútávon egyébként sem megoldás • egyetlen HTTP kérés (mint a png sprite-oknál, viszont nincs szükség CSS pozicionálásra) • a fileméret jóval kisebb a képeknél • széleskörű böngészőtámogatás (IE6 is) 13. szeptember 18., szerda
  8. 8. MIÉRT HASZNÁLJUK? 3; Ugyanazok a CSS-szabályok érvényesek rájuk, mint a normál betűkre, vagyis egyszerűen lehet: • színezni, színátmenetet adni • méretezni • árnyékolni • átlátszóságot állítani • forgatni • stroke-olni • :hover, :focus stílusokat beállítani, on the fly • css transition-ök • ... 13. szeptember 18., szerda
  9. 9. MIÉRT HASZNÁLJUK? 5; Illeszkedik az aktuális trendekhez: • reszponzív design • a böngésző a webdesigner eszköze, nem a Photoshop • pixel-free css • fl*t design 13. szeptember 18., szerda
  10. 10. SEMMI SEM TÖKÉLETES... 13. szeptember 18., szerda
  11. 11. SEMMI SEMTÖKÉLETES... 1; Időrabló és komplex feladat, hogy “normál” pixelsűrűségű eszközön jól mutasson, igazán jó végeredmény sosem garantált. gizmodo.com 13. szeptember 18., szerda
  12. 12. SEMMI SEMTÖKÉLETES... 2; Renderelési különbségek böngészők és op. rendszerek között. Win 7 IE 10 Win 8 IE 10 Win 8 Chrome 29 OS X Chrome 29 OS X Firefox 23 13. szeptember 18., szerda
  13. 13. SEMMI SEMTÖKÉLETES... Win 7 IE 10 OS X Chrome 29 OS X Firefox 23 iOS 7 Ezek a problémák nagy pixelsűrűségű eszközökön megszűnnek. 13. szeptember 18., szerda
  14. 14. SEMMI SEMTÖKÉLETES... 3; Csak egyszínű ikonokat használhatunk OH, WAIT! 13. szeptember 18., szerda
  15. 15. SEMMI SEMTÖKÉLETES... forecastfont.iconvau.lt/ 13. szeptember 18., szerda
  16. 16. MOST MÁR CSINÁLJUNK VÉGRE VALAMIT!!! 13. szeptember 18., szerda
  17. 17. http://icomoon.io 13. szeptember 18., szerda
  18. 18. http://icomoon.io 13. szeptember 18., szerda
  19. 19. http://icomoon.io 13. szeptember 18., szerda
  20. 20. http://icomoon.io 13. szeptember 18., szerda
  21. 21. Az Icomoon által generált font formátumok: 13. szeptember 18., szerda
  22. 22. 13. szeptember 18., szerda
  23. 23. OKÉ, KÉSZ A FONT, ÉS MOST??? 13. szeptember 18., szerda
  24. 24. Az ikonfontunk markupja 1; data- tulajdonság használatával: 2; class használatával: 13. szeptember 18., szerda
  25. 25. style.css 13. szeptember 18., szerda
  26. 26. style.css 13. szeptember 18., szerda
  27. 27. style.css 13. szeptember 18., szerda
  28. 28. style.css 13. szeptember 18., szerda
  29. 29. Példa:Markup: CSS: 13. szeptember 18., szerda
  30. 30. Példa: 13. szeptember 18., szerda
  31. 31. Példa: 13. szeptember 18., szerda
  32. 32. HA MÉG BÍRJÁTOK: MULTILAYERES IKONOK 13. szeptember 18., szerda
  33. 33. A kívánt végeredmény: 13. szeptember 18., szerda
  34. 34. A két ikon Illustratorban, 512x512 px-es canvason, 32-es griddel, pontosan ráigazítva 13. szeptember 18., szerda
  35. 35. A markup: A CSS: 13. szeptember 18., szerda
  36. 36. Még nem tökéletes: 13. szeptember 18., szerda
  37. 37. Vissza a CSS-hez: 13. szeptember 18., szerda
  38. 38. 13. szeptember 18., szerda
  39. 39. B-változat: Multilayeres, de csak egyszínű A CSS: 13. szeptember 18., szerda
  40. 40. 13. szeptember 18., szerda
  41. 41. A témában még: http://fontello.com/ http://fortawesome.github.io/Font-Awesome/ http://fontastic.me/ http://icomoon.io/ Letölthető: Multilayeres ikonfont + html A prezentációban látott ikonok változatai A multilayeres változatokért kösz a segítséget, @freevo! 13. szeptember 18., szerda

×