pouët.net

CSS ART

category: general [glöplog]
from ansi art to css art:
http://www.romancortes.com/blog/
added on the 2008-04-10 06:48:54 by texel texel
wow !
added on the 2008-04-10 07:21:21 by willbe willbe
holy cow this is incredible!
MOAR
added on the 2008-04-10 09:45:44 by LiraNuna LiraNuna
Can someone explain what is incredible about this ...?
added on the 2008-04-10 09:47:48 by nytrik nytrik
:)

nytrik: it's done (almost) only using scaled and colored characters.
added on the 2008-04-10 09:53:06 by p01 p01
This is an example of how the value of the art increase when you know how it was made. A drawing of Homer isn't that interesting in itself but one made with cleaver use of CSS is great. Just like if Uri Geller made a drawing of a goatse it wouldn't be so great but if he did it by coloring parts of the paper with pure telekinesis it would be something :)

There are more (real) examples, like that first speech emulation when a computer sings Daisy for instance.
added on the 2008-04-10 10:16:36 by El Topo El Topo
Ok ... Then i dont' understand how he menaged to get that nice looking round aspect. It looks like vectors
added on the 2008-04-10 10:25:14 by nytrik nytrik
fonts == vectors ;)
But still it's a nice feat.

Similar "abuse" of typography has been done in a/some 4K by calodox, and certainly elsewhere.
added on the 2008-04-10 10:29:17 by p01 p01
nytrik: in your browser, do try to select the text under it... you'll see plenty of "o" characters making the nice rounded aspect :)

p01: yeah, nothing new about using typography for graphics... the only "new" thing about it is doing it in CSS with some recognizable drawing
added on the 2008-04-10 10:32:23 by Jcl Jcl
Nice, like an ACID test, except it works
added on the 2008-04-10 10:33:30 by cruzer cruzer
BB Image
added on the 2008-04-10 11:03:51 by Zest Zest
Jcl: there's a bunch a CSS art using border slants too.

cruzer: Acid 2 and 3 work for me ;)
added on the 2008-04-10 11:16:03 by p01 p01
wtf...
p01: yes, had seen some... not with typography -and- CSS (or... not that correct) AFAIK
added on the 2008-04-10 12:24:48 by Jcl Jcl
Well, it's good.. but there are a bunch of css/html art on youtube and for months even.
wow
F*n excellent.
Should I do a post explaining how I did it in English maybe? Spanish sucks :)
added on the 2008-04-10 17:22:20 by texel texel
Quote:
cruzer: Acid 2 and 3 work for me ;)

that's because you use devbuilds - no stable browser release has passed acid3 yet.
added on the 2008-04-10 17:32:50 by Gargaj Gargaj
no, code a png2css instead for lazy bums ;)
added on the 2008-04-10 17:33:28 by Zest Zest
Yes Spanish sucks ;)

Haven't look at the code but I guess you also use some border slants for big|slanted areas like the neck and cheek.
added on the 2008-04-10 17:33:58 by p01 p01
p01, no, I have first renderded in black using fonts and the in the up with color, with little font size and displacement...
added on the 2008-04-10 18:03:55 by texel texel
Zest, the png2css is an awesome idea! :D
added on the 2008-04-10 18:05:11 by texel texel
Gargaj: :p Oh well, it shouldn't be long until Safari merges the acid3 fixes made in WebKit.

texel: oh. Cool. Did you make some kind of tool to add, color, position a character, etc... with reference image overlay ?
added on the 2008-04-10 18:20:54 by p01 p01
{imagine a pure CSS thumb-up icon here}

Now you just need to do the same thing, but with characters that spell out "Image of Homer Simpson's head" to make it fully screen-reader compliant :-)



(and yes, before you say anything, I know that 'Image of [foo]' is a really lousy thing to put as alt text)
added on the 2008-04-10 18:30:46 by gasman gasman

login