Richard Duchatsch Johansen
Front-end Developer, expert HTML5/CSS3, SEO, Validation Cross-browser, Semantic Web, Open Web, Responsive Design and Accessibility Specialties: Certification of HTML5 and CSS3 by W3C.br; Visie the Advanced CSS / Tableless;
FONTICONS E SVG
Porque, onde e como
Utilizar?
Por Richard Duchatsch Johansen - /ridjohansen
Richard Duchatsch Johansen
Sou caipira do interior
Front-end (Menino do HTML/CSS)!
/
image Sprites
Images Sprites
Pros
- Menor quantidede de requests
- Icones coloridos / transparentes
- Cross-browser mais simplificado
Cons
- Difícil manutenção
- Retina display
- Saber utilizar de forma extensível
images Sprites
Ferramentas interessantes:
-
Spritecow - http://www.spritecow.com/
-
Stitches - http://draeton.github.com/stitches/
- CSS Sprites Generator - http://css-sprit.es/
Fonticons
Fonticons
PROS
- Menor quantidede de requests
- Retina display suport
- Suporta CSS3
CONS
- Requer conhecimento de imagens vetoriais
- Exige bom dominio CSS
- Não possui icones coloridos
Fonticons
Ferramentas interessantes:
- Icomoon - http://icomoon.io/
-
Fontello - http://fontello.com/
- Pictonic - https://pictonic.co/fontbuilder
-
Pictos - https://my.pictos.cc/builder/
-
Zurb Icon Font - http://foundation.zurb.com/icon-fonts.php
SVG icons
SVG Icons
PROS
- Menor quantidade de requests
- Retina display suport
- Suporta CSS3
- Possui icones coloridos nativos
CONS
- Requer conhecimento de imagens vetoriais
- Exige bom dominio CSS
- Para personalização, exige conhecimento em SVG
SVG Icons
Ferramentas interessantes:
-
http://jefff.co/misc/svg/
- Raphäel SVG icons - http://raphaeljs.com/icons/
- Zurb Social SVG icons http://foundation.zurb.com/social-icons.php
- SVG Icon Generator
http://www.kkj.no/apps/windows-phone-svg-icon-generator.htm
Dicas e Tutoriais
Obrigado!
linkedin.com/in/ridjohansen
facebook.com/ridjohansen
twitter.com/ridjohansen
github.com/ridjohansen
ridjohansen@gmail.com
deck
By Richard Duchatsch Johansen
