Imagens feitas somente com CSS

Recentemente começou a surgir uma coleção de ilustrações feitas somente com CSS. Usando features e técnicas de CSS como :after, :before, translate, matrix, rotate, border-radius, box-shadow, entre outras, programadores front-end com muito tempo e imaginação vão fazendo sopinhas de div’s e span’s, criando ilustrações sem carregar nenhum arquivo de imagem no HTML.

Veja os exemplos mais famosos. Alguns usam até animação em CSS.

Bussola animada
Bussola animada em CSS

Homer Simpson
Homer Simpson em CSS

Brender
Brender do Futurama em CSS

Twitter baleiando
twitter baleiando em css

Ícones do IOS
Ícones do IOS

O efeito é incrível mas por enquanto tem pouca utilidade. Vamos ver aonde a imaginação dos programadores vai chegar.

This entry was posted in CSS, HTML5 by Danilo. Bookmark the permalink.

About Danilo

Danilo é desenvolvedor front end e back end. Gosta de tênis, de acompanhar o Corinthians e de jogar futebol de videogame (no futebol de verdade ele é muito ruim).

One thought on “Imagens feitas somente com CSS

Leave a Reply

Your email address will not be published. Required fields are marked *