7 ms·

Famous Logos Designed Entirely in CSS

390 points by tilt 15y ago

jneal 15y ago
I'm slightly blown away by this. Call my naive, but perhaps I knew this was possible but just wasn't expecting it to look as good as it does. I'm not sure what's more surprising, how good the logos look, or the fact that someone had to have spent a tremendous amount of time designing all these from scratch with CSS.
- ajankovic 15y ago
  I think it is kind of an irony that code displayed underneath those excellent logos is so hard to read because of those same css effects.
flixic 15y ago
Adobe being first didn't impress me much, Twitter made me curious, and I was extremely impressed by Steve Jobs, Apple, BP and Nike.
- wanorris 15y ago
  Atari with the Pong game was pretty awesome too.
- WettowelReactor 15y ago
  Whats the advantage of doing this versus sprite splicing
  - todsul 15y ago
    Few advantages, mostly disadvantages. But unbelievably cool.
  - jwallaceparker 15y ago
    There is probably a negligible bandwidth optimization doing it this way. It's more just an impressive feat that pushes the boundaries of what's imaginable using CSS.
- syaz1 15y ago
  Steve Jobs looks like Gandhi.
SnowLprd 15y ago
Excellent work. Can you imagine how amazing it would be if there were a tool that allowed us to convert/output all our images as CSS/SVG/etc instead of bitmaps? I, for one, look forward to the day when the only static assets we have to worry about are text-based assets such as CSS and JS.
- tilt 15y ago
  Ringed a bell http://www.imgtocss.com/ http://www.imgtocss.com/
  - martian 15y ago
    Looks more like imgtotable. Interesting nevertheless.
  - underwater 15y ago
    I love that it actually converts the image to a table with bgcolor attributes. It doesn't rely on CSS at all.
    - dwwoelfel 15y ago
      That's not always true. Any image with an alpha channel will have an opacity style attribute. In the firefox logo[1], for example, you see things like this: <td bgcolor="#081b3c" style=opacity:0.17;filter:alpha(opacity=17) />. [1] http://www.imgtocss.com/convert?url=http://www.imgtocss.com/assets/images/firefox.png http://www.imgtocss.com/convert?url=http://www.imgtocss.com/...
GiraffeNecktie 15y ago
I hate to be pedantic but that should be "rendered entirely using CSS". The logos were designed by their respective designers using whatever tools.
- Suan 15y ago
  Its confusing as well. Before clicking the link I thought they would be icons (newer ones, naturally) which were designed from scratch using CSS.
  - dkrich 15y ago
    That's what I was thinking too.
- jwallaceparker 15y ago
  You have a point, but the term "design" also applies to writing code, in this case CSS. So I think the title still applies.
deltaqueue 15y ago
Perhaps this is a naive question, but are there any benchmarks comparing client-side load times for actual images vs. images rendered in CSS? Server-side bandwidth savings is easier to calculate, and while I realize this kind of savings for sites like Twitter can create noticeable margins, I'm curious as to what the cost-benefit threshold is.
- sek 15y ago
  I have an Atom-Netbook and didn't notice any delay. The decoding of an image file is also a little work, i assume both are very low.
- bgarbiak 15y ago
  Can't give you any hard numbers but I'm quite sure that "CSS images" this size load faster in most cases. But, once you load an actual raster image you're done with it: you can cache it, reuse it as many times as you want, manipulate it's placement, etc. - all without significant performance issues. With "CSS images" that's not the case. Placing a few on one page and/or allowing user any interaction with them will create performance bottlenecks more often than not. For the 'real world usage' it's safer to stay with the raster images. Matt Seeley, UI Engineer at Netﬂix, made a presentation in which he touches these issues. It's available here: http://dl.dropbox.com/u/5618867/mseeley-2011-09-27-html5devconf.pdf http://dl.dropbox.com/u/5618867/mseeley-2011-09-27-html5devc...
KaeseEs 15y ago
I'm kind of bummed that most of these are thoroughly broken in Opera, and I wonder whether it's the CSS that's broken or whether Presto is rendering them wrong.
- jarek 15y ago
  Yeah. Sorry to be a nitpicker, but these aren't logos designed entirely in CSS, they're logos designed in CSS and vendor-specific CSS extensions.
- rplnt 15y ago
  You can see that they included browser specific prefix for Firefox and Chrome/Safari, that is -moz-* and -webkit-* respectively and left out (although not everywhere) the Opera's one (-o-). So yeah, the CSS won't work wheter the Opera implements these preview features or not. And I'm sure it implements most (if not all) of them. But to be fair, the CSS itself should work as soon as the specification is closed and browsers implement it under the regular names, without those prefixes. edit: Here is the list of attributes supported by Opera http://www.opera.com/docs/specs/presto26/css/o-vendor/ http://www.opera.com/docs/specs/presto26/css/o-vendor/ (you can see that transform, the one left out in the first example, is one of them)
- bmj 15y ago
  Doesn't render correctly in IE9, either.
deleted 15y ago
[deleted]
missing_cipher 15y ago
Could someone explain the Atari one? Don't quite understand how it's animating.
- eslaught 15y ago
  I believe the relevant lines are @-webkit-keyframes ball { 0%, 100% { left:30px; top:107px } 30% ... and -webkit-animation: player2 4s linear 0 infinite normal; which define the animation keyframes and parameters. See the webkit blog for information on how it works: http://www.webkit.org/blog/324/css-animation-2/ http://www.webkit.org/blog/324/css-animation-2/
  - missing_cipher 15y ago
    Interesting. Thanks. :)
kenjackson 15y ago
Maybe a dumb question from someone who isn't proficient with CSS -- but if you can render these as vector images, can't you autogenerate the CSS for them? And the reason I even ask is I feel like I could draw all of these logos pretty well with Illustrator, but couldn't just sit down in a text editor and make these logos with CSS.
- icebraining 15y ago
  In theory, yes, in practice I don't know if such converter exists. But SVG should be a better option anyway (it doesn't work in <IE9, but on the other hand, this probably won't either).
  - civilian 15y ago
    Hmmmm. Maybe there could be a SVG to CSS converter!
- taybenlor 15y ago
  It's funny, I love front-end development and I have the exact opposite problem. Trying to design these in Illustrator would be awful. But HTML+CSS, not too hard. This is especially the case with buttons. Photoshop is confusing, CSS3 less so.
necolas 15y ago
These use a lot of empty divs. It's no different in approach to the "twitter fail whale in css" experiment of last year.
- mortenjorck 15y ago
  I'll be impressed when someone can build a logo out of CSS... semantically.
  - dextorious 15y ago
    "Semanticallity" (sic), wrt templates and css is not all it's cranked up to be. It's just voodoo thinking on the part of web designers that were taught about it circa 2000. And it basically comes from the misunderstanding that the html page is the data, when it's really just a RENDERING of the data. The data is what's on the DB or storage system --and that, yes, has to be semantically stored and attributed. The template is just a means to show them GRAPHICALLY, not semantically. Except if our main purpose is to make screen scrapping easier.
    - mortenjorck 15y ago
      The rendering of data is data itself. We structure databases semantically for backend developers. Why shouldn't we structure display markup semantically for frontend developers?
      - dextorious 15y ago
        > The rendering of data is data itself. Only if you have a poor system of sharing data, one that necessitates the rendering to be the data. Why put that inflexible requirement upon yourself? We have plenty of renderings that are not supposed to be data (i.e mechanically readable) by themselves, from graphical UIs to paper printouts. > We structure databases semantically for backend developers. > Why shouldn't we structure display markup semantically for frontend developers? Because the target audience of the display markup is not "front-end developers", it's our website viewers. And they could care less how we structure our display markup. A truly intelligent system of content/display separation wouldn't use "semantic markup" and such nonsense, but true separation, i.e multiple types of data output. Take accessibility for example. What's good for a web browser is not equally good for a screen reader. The optimal path would be not to share the same display markup, but to create a specialized screen reading output that can leverage the same underlying data. We only do a half baked work when we add media css, alt attributes and such to "semantic display markup". It's a leaky abstraction. And then you go and implement an interface to the website as an Android or an iPhone app, and suddenly the "semantic display markup" is useless, you do it with custom queries and native controls. Or you go an implement a voice operated interface to the site, like voice xml, and the "semantic display markup" is of no use here too. Heck, even when we output something as basic as an Atom/RSS feed, we don't get to reuse the "semantic display markup", we output a customized feed.
kreek 15y ago
This is cool but isn't this what SVG (ignoring browser incompatibilities) is for? CSS is for affecting the layout of the content. In most uses a logo is content, that content could still be affected by style, but I don't think it should be entirely defined by CSS.
- dspillett 15y ago
  Definitely. SVG is available in any browser that supports all the selectors being use (i.e. it'll not work in IE6/7/8 with CVG, but these CSS versions probably won't either), and the code for them in SVG would be significantly smaller then that markup+styling I'd wager.
clyfe 15y ago
Our logo on https://entrydns.net/ https://entrydns.net/ is also made in CSS entirely
bcrescimanno 15y ago
I hate to be "that dick" so let me first say that this is damn impressive stuff; kudos to the authors for some serious CSS wizardry! It's also completely and totally useless. The person / people who did this are obviously talented and have a lot of expertise. I'd really rather see people with this level of ability contributing meaningful, useful tools / techniques to the community rather than seeing this type of post over and over again. I can hear the arguments now, "but it shows off the power of CSS!" No, it doesn't. It shows off what a clever person can achieve by tinkering with a system; but there's no practical value to most of the techniques demonstrated. CSS has a lot of power; but its best demonstrated by projects like the CSS Zen Garden that show off real-world CSS use.
- cgarvey 15y ago
  I just deleted my comment after reading this. You said exactly what I had planned to. I wish the time spent on this project was put towards something more useful.
  - lifthrasiir 15y ago
    No, playing fun with the system itself could be useful in unexpected ways. Like esoteric programming languages (leads to the serious exploration of unconventional computation models), code golfing and obfuscated codes (helps shaping the knowledge of a particular language and often leads to the clever way to tackle problems), demoscenes (you know where the Spore came from) and hacking (with the original meaning). As long as you are aware of doing something unconventional, it is fine to keep these sports. If he/she did put these logos in production then I'll object though.
    - cgarvey 15y ago
      I completely agree with you. The act of exploration is a beautiful thing. However, my statement was based on the fact this technique has been done before. This area has been explored. While this site is executed very well, in my eyes, it doesn't offer (or attempt to, seemingly) anything I have yet to see. That was my only real point.
TorbjornLunde 15y ago
Logo are content, so they should be displayed with img, either as raster (png or gif) or as vector (svg).
deleted 15y ago
[deleted]
jwallaceparker 15y ago
This is really impressive. I've never seen something like this in pure CSS. If anyone knows of anything this impressive, please post a link to it.
- makepanic 15y ago
  Made something similar a while ago: http://sy0t0s.bplaced.net/demo/hero/ http://sy0t0s.bplaced.net/demo/hero/ - Apple logo http://sy0t0s.bplaced.net/demo/tubes/ http://sy0t0s.bplaced.net/demo/tubes/ - Nixie tubes http://sy0t0s.bplaced.net/demo/opera/ http://sy0t0s.bplaced.net/demo/opera/ - Opera Browser in your browser I have more, but don't want to spam links. If you want to see more you can crawl through the /demo/ folder on the page. Most of them are experiments with CSS3, javascript and html5.
  - jwallaceparker 15y ago
    Impressive, thanks!
ori_b 15y ago
It's interesting opening it up with an older browser and seeing how it fails.
sabatier 15y ago
You have to weigh up the 'coolness' of such CSS trickery with the amount of extra HTML code there is, when you could have just used an image!
libraryatnight 15y ago
The droplets on the Pepsi logo, and the pong animation on the Atari, are very cool. Inspiration to better my CSS skills.
deleted 15y ago
[deleted]
minikomi 15y ago
Also see the many many insane examples of CSS art on jsdo.it http://jsdo.it/tsmallfield/counting_sheep2/fullscreen http://jsdo.it/tsmallfield/counting_sheep2/fullscreen - double click for more animals http://jsdo.it/norahiko/m1WT/fullscreen http://jsdo.it/norahiko/m1WT/fullscreen http://jsdo.it/tsmallfield/pigg/fullscreen http://jsdo.it/tsmallfield/pigg/fullscreen - cute "avatar" like on http://pigg.ameba.jp/ http://pigg.ameba.jp/ ameba pigg
culebron 15y ago
This looks impressive, but I think an SVG image would be just enough and the right tool for single-color logos like those of Adobe, Twitter and Nike. For Nike it will be just a background declaration, the curve with Bezier parameters and the foreground color. It will be much more compact and be able to scale. And just as much cross-browser as CSS, which means not totally cross-browser. Your logos are broken in Opera and IE, for example. I understand it takes much effort and expertize, but it's not the right tool for drawing images. You could do this by just exploring the UTF characters table and positioning differently colored characters near each other to make an image. But the fastest way to draw a vertored shape in a browser is still SVG.
mrmasa 15y ago
I love this. Challenging small but crazy ideas always strengthens our creativity. Remember your childhood. We created a lot of unique stuffs by using imperfect materials around us such as junk and bulk. These continuous challenge will be nutrition to help us become great creators.
mcantor 15y ago
This is very clever. Is there supposed to be a practical application, or is it simply a "look at this neat thing I did with CSS" demo?

390 points by tilt 15y ago

jneal 15y ago

I'm slightly blown away by this. Call my naive, but perhaps I knew this was possible but just wasn't expecting it to look as good as it does. I'm not sure what's more surprising, how good the logos look, or the fact that someone had to have spent a tremendous amount of time designing all these from scratch with CSS.

ajankovic 15y ago
I think it is kind of an irony that code displayed underneath those excellent logos is so hard to read because of those same css effects.

flixic 15y ago

Adobe being first didn't impress me much, Twitter made me curious, and I was extremely impressed by Steve Jobs, Apple, BP and Nike.

wanorris 15y ago
Atari with the Pong game was pretty awesome too.
WettowelReactor 15y ago
Whats the advantage of doing this versus sprite splicing
- todsul 15y ago
  Few advantages, mostly disadvantages. But unbelievably cool.
- jwallaceparker 15y ago
  There is probably a negligible bandwidth optimization doing it this way. It's more just an impressive feat that pushes the boundaries of what's imaginable using CSS.
syaz1 15y ago
Steve Jobs looks like Gandhi.

SnowLprd 15y ago

Excellent work. Can you imagine how amazing it would be if there were a tool that allowed us to convert/output all our images as CSS/SVG/etc instead of bitmaps? I, for one, look forward to the day when the only static assets we have to worry about are text-based assets such as CSS and JS.

tilt 15y ago
Ringed a bell http://www.imgtocss.com/ http://www.imgtocss.com/
- martian 15y ago
  Looks more like imgtotable. Interesting nevertheless.
- underwater 15y ago
  I love that it actually converts the image to a table with bgcolor attributes. It doesn't rely on CSS at all.
  - dwwoelfel 15y ago
    That's not always true. Any image with an alpha channel will have an opacity style attribute. In the firefox logo[1], for example, you see things like this: <td bgcolor="#081b3c" style=opacity:0.17;filter:alpha(opacity=17) />. [1] http://www.imgtocss.com/convert?url=http://www.imgtocss.com/assets/images/firefox.png http://www.imgtocss.com/convert?url=http://www.imgtocss.com/...

GiraffeNecktie 15y ago

I hate to be pedantic but that should be "rendered entirely using CSS". The logos were designed by their respective designers using whatever tools.

Suan 15y ago
Its confusing as well. Before clicking the link I thought they would be icons (newer ones, naturally) which were designed from scratch using CSS.
- dkrich 15y ago
  That's what I was thinking too.
jwallaceparker 15y ago
You have a point, but the term "design" also applies to writing code, in this case CSS. So I think the title still applies.

deltaqueue 15y ago

Perhaps this is a naive question, but are there any benchmarks comparing client-side load times for actual images vs. images rendered in CSS? Server-side bandwidth savings is easier to calculate, and while I realize this kind of savings for sites like Twitter can create noticeable margins, I'm curious as to what the cost-benefit threshold is.

sek 15y ago
I have an Atom-Netbook and didn't notice any delay. The decoding of an image file is also a little work, i assume both are very low.
bgarbiak 15y ago
Can't give you any hard numbers but I'm quite sure that "CSS images" this size load faster in most cases. But, once you load an actual raster image you're done with it: you can cache it, reuse it as many times as you want, manipulate it's placement, etc. - all without significant performance issues. With "CSS images" that's not the case. Placing a few on one page and/or allowing user any interaction with them will create performance bottlenecks more often than not. For the 'real world usage' it's safer to stay with the raster images. Matt Seeley, UI Engineer at Netﬂix, made a presentation in which he touches these issues. It's available here: http://dl.dropbox.com/u/5618867/mseeley-2011-09-27-html5devconf.pdf http://dl.dropbox.com/u/5618867/mseeley-2011-09-27-html5devc...

KaeseEs 15y ago

I'm kind of bummed that most of these are thoroughly broken in Opera, and I wonder whether it's the CSS that's broken or whether Presto is rendering them wrong.

jarek 15y ago
Yeah. Sorry to be a nitpicker, but these aren't logos designed entirely in CSS, they're logos designed in CSS and vendor-specific CSS extensions.
rplnt 15y ago
You can see that they included browser specific prefix for Firefox and Chrome/Safari, that is -moz-* and -webkit-* respectively and left out (although not everywhere) the Opera's one (-o-). So yeah, the CSS won't work wheter the Opera implements these preview features or not. And I'm sure it implements most (if not all) of them. But to be fair, the CSS itself should work as soon as the specification is closed and browsers implement it under the regular names, without those prefixes. edit: Here is the list of attributes supported by Opera http://www.opera.com/docs/specs/presto26/css/o-vendor/ http://www.opera.com/docs/specs/presto26/css/o-vendor/ (you can see that transform, the one left out in the first example, is one of them)
bmj 15y ago
Doesn't render correctly in IE9, either.

deleted 15y ago

[deleted]

missing_cipher 15y ago

Could someone explain the Atari one? Don't quite understand how it's animating.

eslaught 15y ago
I believe the relevant lines are @-webkit-keyframes ball { 0%, 100% { left:30px; top:107px } 30% ... and -webkit-animation: player2 4s linear 0 infinite normal; which define the animation keyframes and parameters. See the webkit blog for information on how it works: http://www.webkit.org/blog/324/css-animation-2/ http://www.webkit.org/blog/324/css-animation-2/
- missing_cipher 15y ago
  Interesting. Thanks. :)

kenjackson 15y ago

Maybe a dumb question from someone who isn't proficient with CSS -- but if you can render these as vector images, can't you autogenerate the CSS for them? And the reason I even ask is I feel like I could draw all of these logos pretty well with Illustrator, but couldn't just sit down in a text editor and make these logos with CSS.

icebraining 15y ago
In theory, yes, in practice I don't know if such converter exists. But SVG should be a better option anyway (it doesn't work in <IE9, but on the other hand, this probably won't either).
- civilian 15y ago
  Hmmmm. Maybe there could be a SVG to CSS converter!
taybenlor 15y ago
It's funny, I love front-end development and I have the exact opposite problem. Trying to design these in Illustrator would be awful. But HTML+CSS, not too hard. This is especially the case with buttons. Photoshop is confusing, CSS3 less so.

necolas 15y ago

These use a lot of empty divs. It's no different in approach to the "twitter fail whale in css" experiment of last year.

mortenjorck 15y ago
I'll be impressed when someone can build a logo out of CSS... semantically.
- dextorious 15y ago
  "Semanticallity" (sic), wrt templates and css is not all it's cranked up to be. It's just voodoo thinking on the part of web designers that were taught about it circa 2000. And it basically comes from the misunderstanding that the html page is the data, when it's really just a RENDERING of the data. The data is what's on the DB or storage system --and that, yes, has to be semantically stored and attributed. The template is just a means to show them GRAPHICALLY, not semantically. Except if our main purpose is to make screen scrapping easier.
  - mortenjorck 15y ago
    The rendering of data is data itself. We structure databases semantically for backend developers. Why shouldn't we structure display markup semantically for frontend developers?
    - dextorious 15y ago
      > The rendering of data is data itself. Only if you have a poor system of sharing data, one that necessitates the rendering to be the data. Why put that inflexible requirement upon yourself? We have plenty of renderings that are not supposed to be data (i.e mechanically readable) by themselves, from graphical UIs to paper printouts. > We structure databases semantically for backend developers. > Why shouldn't we structure display markup semantically for frontend developers? Because the target audience of the display markup is not "front-end developers", it's our website viewers. And they could care less how we structure our display markup. A truly intelligent system of content/display separation wouldn't use "semantic markup" and such nonsense, but true separation, i.e multiple types of data output. Take accessibility for example. What's good for a web browser is not equally good for a screen reader. The optimal path would be not to share the same display markup, but to create a specialized screen reading output that can leverage the same underlying data. We only do a half baked work when we add media css, alt attributes and such to "semantic display markup". It's a leaky abstraction. And then you go and implement an interface to the website as an Android or an iPhone app, and suddenly the "semantic display markup" is useless, you do it with custom queries and native controls. Or you go an implement a voice operated interface to the site, like voice xml, and the "semantic display markup" is of no use here too. Heck, even when we output something as basic as an Atom/RSS feed, we don't get to reuse the "semantic display markup", we output a customized feed.

kreek 15y ago

This is cool but isn't this what SVG (ignoring browser incompatibilities) is for? CSS is for affecting the layout of the content. In most uses a logo is content, that content could still be affected by style, but I don't think it should be entirely defined by CSS.

dspillett 15y ago
Definitely. SVG is available in any browser that supports all the selectors being use (i.e. it'll not work in IE6/7/8 with CVG, but these CSS versions probably won't either), and the code for them in SVG would be significantly smaller then that markup+styling I'd wager.

clyfe 15y ago

Our logo on https://entrydns.net/ https://entrydns.net/ is also made in CSS entirely

bcrescimanno 15y ago

I hate to be "that dick" so let me first say that this is damn impressive stuff; kudos to the authors for some serious CSS wizardry! It's also completely and totally useless. The person / people who did this are obviously talented and have a lot of expertise. I'd really rather see people with this level of ability contributing meaningful, useful tools / techniques to the community rather than seeing this type of post over and over again. I can hear the arguments now, "but it shows off the power of CSS!" No, it doesn't. It shows off what a clever person can achieve by tinkering with a system; but there's no practical value to most of the techniques demonstrated. CSS has a lot of power; but its best demonstrated by projects like the CSS Zen Garden that show off real-world CSS use.

cgarvey 15y ago
I just deleted my comment after reading this. You said exactly what I had planned to. I wish the time spent on this project was put towards something more useful.
- lifthrasiir 15y ago
  No, playing fun with the system itself could be useful in unexpected ways. Like esoteric programming languages (leads to the serious exploration of unconventional computation models), code golfing and obfuscated codes (helps shaping the knowledge of a particular language and often leads to the clever way to tackle problems), demoscenes (you know where the Spore came from) and hacking (with the original meaning). As long as you are aware of doing something unconventional, it is fine to keep these sports. If he/she did put these logos in production then I'll object though.
  - cgarvey 15y ago
    I completely agree with you. The act of exploration is a beautiful thing. However, my statement was based on the fact this technique has been done before. This area has been explored. While this site is executed very well, in my eyes, it doesn't offer (or attempt to, seemingly) anything I have yet to see. That was my only real point.

TorbjornLunde 15y ago

Logo are content, so they should be displayed with img, either as raster (png or gif) or as vector (svg).

deleted 15y ago

[deleted]

jwallaceparker 15y ago

This is really impressive. I've never seen something like this in pure CSS. If anyone knows of anything this impressive, please post a link to it.

makepanic 15y ago
Made something similar a while ago: http://sy0t0s.bplaced.net/demo/hero/ http://sy0t0s.bplaced.net/demo/hero/ - Apple logo http://sy0t0s.bplaced.net/demo/tubes/ http://sy0t0s.bplaced.net/demo/tubes/ - Nixie tubes http://sy0t0s.bplaced.net/demo/opera/ http://sy0t0s.bplaced.net/demo/opera/ - Opera Browser in your browser I have more, but don't want to spam links. If you want to see more you can crawl through the /demo/ folder on the page. Most of them are experiments with CSS3, javascript and html5.
- jwallaceparker 15y ago
  Impressive, thanks!

ori_b 15y ago

It's interesting opening it up with an older browser and seeing how it fails.

sabatier 15y ago

You have to weigh up the 'coolness' of such CSS trickery with the amount of extra HTML code there is, when you could have just used an image!

libraryatnight 15y ago

The droplets on the Pepsi logo, and the pong animation on the Atari, are very cool. Inspiration to better my CSS skills.

deleted 15y ago

[deleted]

minikomi 15y ago

Also see the many many insane examples of CSS art on jsdo.it http://jsdo.it/tsmallfield/counting_sheep2/fullscreen http://jsdo.it/tsmallfield/counting_sheep2/fullscreen - double click for more animals http://jsdo.it/norahiko/m1WT/fullscreen http://jsdo.it/norahiko/m1WT/fullscreen http://jsdo.it/tsmallfield/pigg/fullscreen http://jsdo.it/tsmallfield/pigg/fullscreen - cute "avatar" like on http://pigg.ameba.jp/ http://pigg.ameba.jp/ ameba pigg

culebron 15y ago

This looks impressive, but I think an SVG image would be just enough and the right tool for single-color logos like those of Adobe, Twitter and Nike. For Nike it will be just a background declaration, the curve with Bezier parameters and the foreground color. It will be much more compact and be able to scale. And just as much cross-browser as CSS, which means not totally cross-browser. Your logos are broken in Opera and IE, for example. I understand it takes much effort and expertize, but it's not the right tool for drawing images. You could do this by just exploring the UTF characters table and positioning differently colored characters near each other to make an image. But the fastest way to draw a vertored shape in a browser is still SVG.

mrmasa 15y ago

I love this. Challenging small but crazy ideas always strengthens our creativity. Remember your childhood. We created a lot of unique stuffs by using imperfect materials around us such as junk and bulk. These continuous challenge will be nutrition to help us become great creators.

mcantor 15y ago

This is very clever. Is there supposed to be a practical application, or is it simply a "look at this neat thing I did with CSS" demo?