Ikonfontok a mai weben
-
Upload
gyoergy-bokros -
Category
Technology
-
view
481 -
download
0
Transcript of Ikonfontok a mai weben
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. szeptember 18., szerda
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. szeptember 18., szerda
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
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
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
SEMMI SEM
TÖKÉLETES...
13. szeptember 18., szerda
SEMMI SEM TÖ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
SEMMI SEM TÖKÉLETES...
2; Renderelési különbségek böngészők és op. rendszerek között.
Win 7IE 10
Win 8IE 10
Win 8Chrome 29
OS XChrome 29
OS XFirefox 23
13. szeptember 18., szerda
SEMMI SEM TÖKÉLETES...
Win 7IE 10
OS XChrome 29
OS XFirefox 23
iOS 7
Ezek a problémák nagy pixelsűrűségű eszközökön megszűnnek.
13. szeptember 18., szerda
SEMMI SEM TÖKÉLETES...
3; Csak egyszínű ikonokat használhatunk
OH, WAIT!
13. szeptember 18., szerda
SEMMI SEM TÖKÉLETES... forecastfont.iconvau.lt/
13. szeptember 18., szerda
MOST MÁR CSINÁLJUNK
VÉGRE VALAMIT!!!
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ö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