Carlos Cardoso's picture

Homer Simpson desenhado via CSS

A diferença entre hackers e gente comum é que hackers apreciam quando alguém faz algo "apenas para ver se era possível ser feito", como em uma cena do Big Bang Theory onde os desocupados rotearam um sinal dando a volta ao mundo para fazer piscar a luz do abajur. Portanto idéias como a de Javier Román Cortés (o nome espanhol mais cool depois de Juan Sanchez Vila Lobos Ramirez) - desenhar utilizando somente CSS têm o mérito de empurrar uma tecnologia além de seu uso planejado.

Ele utilizou apenas CSS para criar a imagem abaixo (que está em JPG, d'oh!)



No blog de Javier é possível ver a imagem em toda a sua glória, em puro CSS. É útil? Não. Vai substituir os PNGs e JPGs? Não. Mas é algo danado de legal. Eu chamaria de versão Século XXI da ASCII-ART.

=

/#@, M#

Notícias relacionadas

Flávio Amieiro's picture

Vacilo. Aqui quebrou no Opera 9.26 e no Firefox 3beta5.

Ah, no Ubuntu Hardy...

:wq

neyfrota's picture

ue? aqui 'e a mesma configuracao sua e funcionou!

to fucando o codigo heheheh!

ele fala tem que ter verdana (a fonte) ..
vai ver tu nao ta com as msttf-algo-assim

http://ney.frota.net

sudo apt-get install msttcorefonts && fc-cache -fv

O "fc-cache -fv" aí é para não ter reiniciar a seção para as fontes microsoftianas entrarem em ação. Eye-wink

Opera 9.50 b2 = Ok
Firefox 3.0rc1-pre = Aparentemente não funciona
AppleWebKit/525.1+ = Ok

* Rodando Ubuntu 8.04 com ubuntu-restricted-extras, msttcoreconts, etc.

Flávio Amieiro's picture

Há!

Com o msttcorefonts funcionou no Opera e no Firefox!

Show de bola...

:wq

garoa's picture

Bem, ele deixou claro que precisava da fonte Verdana.

rafaeldfmelo's picture

aqui deu uma quebrada no firefox 2.0.0.14, e uma "quebradinha" no safari 3.1.1, tudo isso no mac osx leopard.

parece um acid mais simpatico né Eye-wink ?

ººno mundo so existem 10 tipos de pessoas, as que entendem...e as que nao entendemºº
RafaelDFMelo'Blog

luizzeross's picture

Ia dizer o mesmo, so que no Mandriva 2008. Mas... ficou legou, ele está com um canudo preto, e ficou magro!! HUAhuahuahua!!!

Um slime, dois slimes, três slimes, quatro slimes... um King Slime

Keaton's picture

Tem gente com muita falta do que fazer, admitam.. Mas ficou legal.

Se não me engano dá para desenhar por códigos usando o vhtml ou coisa assim. (pior que eu não lembro o nome certo)

Luiz_Claudio_Eudes's picture

No Firefox 2.0.0.14 apareceu normal aqui no XP!

_____________________________________
Assinatura?

Nem pensar, não entenderiam minha letra!
Minha sorte e que meu Blog não é manuscrito!

meirellez's picture

Big Bang Theory é engrassadíssimo! Eles consegue tirar muita piada boa de um tema relativamente taxado, como fizeram os rorteiristas de Two and a Half Men(aliás, acho que o Chuck Lorre escreve para as duas séries).

------------------------------------
Só a mudança é permanente.

Dauto's picture

Um ACID test mais interessante.

-------------------------------------------------------------------
Se eu quisesse realidade, eu não jogava videogame.

EU QUERO DIVERSÃO, CARAMBA!

fmpfmp's picture

Esse cara merecia um prêmio.

PS.: Estou usando o Firefox 3 beta 5 do Ubuntu 8.04 com o pacote "ubuntu-restricted-extras" instalado, e vejo normal.

th Ogoshi's picture

Incrivel a qualidade do desenho, merece um prêmio mesmo!

E discordo quando ficam falando de "pessoas sem ter o que fazer". Apesar de ser inútil AGORA, essas maluquices que o pessoal andam fazendo por ai pode ser útil algum dia... ou não!

Ubiratan.apo's picture

Eu não seria tão enfatico, veja os testes do W3C para SVG e notará que eles podem substituir animações em flash ou silverlight.

Atenção: Nem todos os testes funcionam, muitos funcionam no WebKit nightly build e no Opera 9.50, em outros browsers eu não sei.

yawara.br além da tecnologia.

No dia que a Microsoft acordar de bom humor e resolver que o SVG é melhor que o VML, talvez.

Como esse dia vai vir um dia depois da volta do Jobs à terra, eu sentaria pra não cansar.

Fabião's picture

SVG, VML, NÃO são semelhantes a alguém desenhar posicionando fontes de modo absoluto em CSS.

Útil para desenho não é. MAS, já vi uma implementação em CSS de uma fonte totalmente desenhada usando seus recursos, usada para substituir os endereços de e-mail digitados em uma página, evitando spam-bots.

Recurso pode ser usado pra captcha também, evitando imagens e dificultando muito o trabalho de ler dos Bots. Os bots terão que advinhar, além do que o desenho é, em que parte da página o desenho está, e a que circunstância é feito.

neyfrota's picture

po.. pra captcha deve ser legal mesmo!!... complica mais pros bots
boa sacada!

http://ney.frota.net

anibalsolon's picture

Bem, não, é que nem programador que guarda um script pra calcular determinantes achando que vai usar depois, hehe.

--

You don't know the powa of da geek side!

O desenho ficou realmente PERFEITO! Só imagino o trabalho que deve ter dado pro autor fazer Smiling

ivank's picture

muito legal! deve ter dado uma trabalheira mesmo... Laughing out loud

Cara que perfeito o.o

A qualidade só melhora quando a gente aumenta a fonte... adorei, quem entende realmente faz maravilhas com as ferramentas certas.

Depois vou ver se fica igual no meu ubuntu =p

renanfernandes's picture

Só eu que acho ASCII-ART mais legal?

th Ogoshi's picture

Não, eu tambem acho muito legal, apesar de não saber se são realmente escritos ou se usam algum programa que faz isso automático... digo isso porque eu tinha um programa que fazia isso, mas com fotos.

renanfernandes's picture

É, esses programas acabaram com a graça do ASCII Art :/

mau.dias's picture

pra ser sincero, não considero esses programas como ascii art..

-----------------------------------------

mas tudo que eu disse pode estar errado..

#MeioBit @ irc.LiveBR.org

gholias's picture

grandes coisas ,
eu aposto que se tivesse usado tabelas tinha ficado pronto na metade do tempo Evil Evil

---------------------------------------------------------------
Quando eu tiver um mano vou chama-lo de Herrar, pq Herrar eh o Mano!

Shomer's picture

FF3b5 perfeito! Quanto a utilidade real, acho que não é possivel pensar nisto agora, se será ou não útil, mas já penso em pessoas fazendo conversores ImageToCCS. Cool!

Salsinha's picture

Também pensei nisso. Imaginei também algo como: "mplayer -vo css homer.avi".

Muito útil para mostrar para alguém e esperar a pergunta "tá, e daí?".

mola's picture

inacreditavel Jawdropping!

JulianaPrado's picture

Oi

Adorei o desenho

Eu não sabia que no CSS eu iria conseguir fazer um desenho

Att

Juliana Prado Uchôa

rodrigoneves's picture

"Juan Sanchez Vila Lobos Ramirez"

Meu ídolo! Smiling

Kondor-rj's picture

Muito bom! Smiling
http://bugigangadigital.wordpress.com/ , afinal, o nome já diz tudo... Sticking out tongue

mau.dias's picture

[offtopic]
só eu que fiquei intrigado com uns caracteres estranhos no final do artigo???
[/offtopic]

-----------------------------------------

mas tudo que eu disse pode estar errado..

#MeioBit @ irc.LiveBR.org

renanfernandes's picture

tentativa frustrada de fazer o homer em ascii?

diogeneskelsen's picture

ficou bom, porém falta o resto da imagem, que cara preguiçoso Sticking out tongue

viniciusc's picture

praticamente um Acid2.1 Sticking out tongue

Trap's picture

Não dava para desenhar a Jessica Alba ?

magfhos's picture

Xi, o cara ficou famoso antes de trocar de Host:

Hj, dia 02/05/08 as 11:27hs: Too many connections Evil

Dimensão Tech - http://blog.dimensaozero.com

Consigpo ouvir os gritos: cadê a semantica... Evil

Só pra constar no IE8 Beta não funfa.

Laughing out loud

Opções de exibição de comentários

Selecione seu modo de exibição dos comentários favorito e clique "Salvar opções" para ativar suas mudanças.

Conexão



Design Wenetus