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

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ö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