Desenhos em CSS!

COMPARTILHE:

Notícia meio batida mas muito interessante para quem trabalha com WEB, na verdade não tem utilidade alguma mas é o tipo de coisa que faz voc...

Notícia meio batida mas muito interessante para quem trabalha com WEB, na verdade não tem utilidade alguma mas é o tipo de coisa que faz você parar e quebrar a cabeça para tentar descobrir como fizeram, a duas imagens abaixo, bem conhecidas por sinal, foram totalmente feita em CSS (Cascading Style Sheets), as postadas aqui no blog estão em JPG mas clicando sobre as imagens você pode conferir no blog de seu criador Javier Román Cortés a versão real em CSS, realmente não serve para nada porém desenhar usando códigos como neste vídeo ou no caso das imagens abaixo é um coisa extremamente complexa, demorada e diferente de qualquer outro tipo de arte, é quase que uma evolução da ASCII-Art, será que no futuro teremos também a CSS-Art?





Fica aí um bom desafio para os webdesigners de plantão!

COMENTÁRIOS

BLOGGER: 3
  1. Ptz!! o cara tem q te paciencia pra caramba pra faze isso..

    copiei o codigo fonte do css do Homer... e veio o cara eh doido q fez isso xD

    Muito bom!!

    ResponderExcluir
  2. A base do código é criada através de um programa:
    http://www.romancortes.com/blog/jpeg2css/

    Mas é só a base mesmo! O cara realmente precisa ter muita paciência.

    Em tempo: André, recebeu meu e-mail!?

    --
    Um abraço,
    Fabiano Shark

    ResponderExcluir
  3. Oi Henrique, eu também dei uma olhada no código e achei bem chato de fazer, quer dizer, imagina ter que fazer aquilo e ficar conferindo traço a traço como as coisas estão ficando... putz.. muito trabalho... obrigado pela visita!!

    Oi Fabiano, dei uma olhada nesse programa, como você disse, mesmo assim ele ainda não entrega tudo pronto... mas enfim acho que daqui alguns meses aparece algo na internet que automatize isso tudo, ahh olhei seu e-mail hoje, foi mal, mas muito legal a matéria inclusive deixei um recado para você no seu blog, tá bem legal, abraço!! volte sempre!!

    ResponderExcluir

Nome

.ai,71,.asl,1,.eps,24,.indd,1,.jpg,20,.png,40,.psd,594,.sketch,2,.svg,7,2006,90,2007,352,2008,942,2009,1780,2010,1822,2011,1825,2012,1764,2013,240,2014,559,2015,1195,2016,518,2017,748,2018,700,2019,415,2am,1,2axion,1,360,4,abril,378,abstrato,223,acer,1,actions,151,adobe,32,adobe experience house,1,adobe max,1,agosto,532,ajax,1,allan portilho,1,animação,39,aritana,1,arte,27,artistas do photoshop,1079,axis,5,backgrounds,1,basekit,1,básico,68,benq,9,bethesda,4,bgs,123,bmx,1,booombox,2,brasilmegaarena,2,brushes,107,bug,1,bunker,1,campus party,1,capcom,1,cartazes de cinema,117,cartazes de rock,203,cinemark,1,codemasters,1,com2us,3,concurso cultural,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,642,dica ninja,99,dificuldade 1,38,dificuldade 2,389,dificuldade 3,948,dificuldade 4,332,dificuldade 5,56,distortions,4,divulgação,1,diy,32,dji,1,dlink,1,documentário,105,dollarphotoclub,37,download,1780,edição de vídeo,3,efeito,1076,esportes,11,fastcom,3,ferramentas online,1,fevereiro,492,filme,3,flipbook,1,flow motion,1,fontes,569,fotolia,13,fotoshistoricas,39,fotosqueabalaramomundo,75,gamebau,1,games,214,gamevil,1,gastore,1,gifart,27,gomidia,1,goPro,1,gradientes,7,greenk,1,guest post,5,historia da foto,22,hitbox,1,hopi-hari,1,hoplon,19,html5,3,hype,2,hyperlapse,5,hyperx,33,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,16,kinship,2,layer style,43,lbee,1,leitores,1,levelup,15,lightpainting,1,lista,2,live-stream,2,magic the gathering,1,maio,336,março,466,matéria,591,maurício de souza produções,1,melhordasemana,17,mestres da pintura,35,meutimao,1,mob2b,1,mockup,39,música,48,natal,1,novembro,698,off,1,off-topic,520,outubro,748,palestra,7,parkour,1,patern,46,pdf,2,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,png,1,positivo,16,post pago,2,prezi,1,printi,2,project ten,2,psd,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,rawar,2,razer,36,relink,209,responsivo,2,retoque de imagem,111,rixty,3,saga,12,selecaoTP,44,setembro,520,shapes,2,showreel,7,skate,59,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,4,template,4,teste,1,texto,272,textura,137,tilt-shift,3,timelapse,21,tipografia,3,tp,2,tunning virtual,14,tutorial,2210,tutorial builder,2,tutorial player,2,ubisoft,71,udemy,1,ui,16,unboxing,1,vaio,1,vice,64,vídeo,706,vídeo aula,484,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Desenhos em CSS!
Desenhos em CSS!
http://www.andresugai.org/Materias/homer/imagem1.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2008/05/desenhos-em-css.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2008/05/desenhos-em-css.html
true
34833248
UTF-8
Ver todos os Posts Não encontramos nenhum post VEJA TODOS Leia Mais Responder Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM LABEL ARQUIVO SEARCH TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para a Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copie todo código Selecione todo código Todos os códigos copiados para o clipboard Não foi possível copiar todo código / textos, pro favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar