Designer recria ícones do iOS usando apenas CSS

Designer recria ícones do iOS usando apenas CSS;
É possível fazer um iPhone inteiro

Certas tecnologias web podem estar apenas começando sua história, mas o lado bom desse início é que podemos nos surpreender mais e mais a cada dia com elas. Veja este exemplo feito por Louies Harboe: os ícones abaixo são uma imagem aqui no blog, mas no site de demonstração onde os capturamos, eles são apenas código renderizado pelo Safari 5. [OBS: os links para as páginas feitas por Harboe não estavam funcionando no momento da publicação deste post devido ao tráfego excessivo.]

Tomando como exemplo o ícone de Contatos, confira como o trabalho foi feito:

No ícone de contatos, usei cinco formas diferentes para a silhueta. A cabeça é um retângulo com cantos arredondados, seguido por outro retângulo pra servir de pescoço e um semicírculo para ser o corpo. Para ter a curva dos ombros ao pescoço, coloquei dois círculos sobre as formas.

Engenhoso, pode ter certeza. Mais detalhes do making-of desta obra-prima podem ser conferidos no blog do Harboe. Ele encerra, aliás, com dois pedidos de adição aos padrões de CSS: a capacidade de criar polígonos e ruído. Ah, em tempo: usamos o Safari 5 para gerar a imagem que ilustra este post, mas você também pode usar outros navegadores WebKit, como o Chrome, para acessar a página (apesar de haver um bug registrado no Chrome para Windows).

Mas você ainda não viu nada! Os ícones são bonitos, mas e o aparelhos que vai “rodar” esses apps? É o que você vê aqui do lado: um iPhone inteiro feito em CSS3 (detalhe: os ponteiros dos relógios se mexem). Este trabalho primoroso é assinado por Jeff Batterton e ele conta que tudo começou com o projeto de um relógio feito unicamente com CSS, mas que depois a ideia deixou de ser original e ele precisou retrabalhá-la. Como o design final só foi testado no Chrome, a renderização que você vê nesta imagem, feita pelo Safari 5, ficou com algumas imperfeições. Isso reforça o argumento de quem afirma que os novos padrões da web ainda têm muito o que melhorar até poderem ser chamados de “padrões”. :-P

De qualquer forma, bem que esses dois poderiam aparecer na página de exemplos de uso de padrões, no Apple.com, não acha?

(Fonte: MacMagazine)