An painting using only XHTML/CSS, no images allowed

What a nice picture, uh? Simple, but nice. Nothing too great. Well, think again. The above image is a screenshot of an XHTML/CSS page that uses no images to display; just divs, spans and a few dots. You can find the entry at my blog (spanish) here:

http://metalize.liveonstyle.com/2007...ibujar-en-css/

And here's the actual drawing:

http://metalize.liveonstyle.com/wp-c...-painting.html

Check out source code. It's not as big as you may think.

Hope you like!

EDITWow... an painting... I'm ashamed. The subject was going to be "an image"... then I decided to use "painting"... and forgot to remove the "an"... My english is not as bad, I swear.

Jam it back in, in the dark.

That's pretty cool. I like. It's kinda like a 2D/3D image since it looks really polygonic. And the shapes aren't organic which is why the source code is probably so low, and the low ammount of colors used. But i've never really seen this done before.

How ya doing, buddy?

Very cool. I'd love to see more, if you ever feel like making some.

This thing is sticky, and I don't like it. I don't appreciate it.

Perhaps I'll do anotherone sometime in the future; but for now I have some other projects and lots of work to do. :P


Glad you liked it!

I am a dolphin, do you want me on your body?

Wow, this is incredible...I never thought anything like this was even possible.

I didn't look too closely at your source (no habla Espanol ), but I'm guessing you're using periods as circles? Very creative indeed.

Still trying to figure out how you did the mountain, though...

Most amazing jew boots

Yeah, the clouds, sun, rainbow, and the tree leaves are just stacked periods.

I'm definitely interested in the diagonal lines in the tree trunk and mountain. How'd you do those?

I once made a picture kind of like this, except instead of drawing it in a web browser, it was in a mathematical graphing program.

What kind of toxic man-thing is happening now?

Originally Posted by CHz

I once made a picture kind of like this, except instead of drawing it in a web browser, it was in a mathematical graphing program.

That was the only part of Algebra 2 that didn't put me to sleep. I made Bart Simpson.

FELIPE NO

Somehow I'm reminded of Katamari, damn rainbow.

Most amazing jew boots

Thanks for the comments!

As stated, the round parts you see are jsut stacked enormous periods. The diagonal lines are made by using a technique called "Slant borders". The theory of it is quite simple, but it's better explained through an example:

Create a div. Now, set each border property through CSS individually, like this:

border-top: 4px solid green;
border-bottom: 4px solid red;
border-right: 4px solid blue;
border-left: 4px solid yellow;

Finally, change the width of the borders and you'll see some pretty interesting stuff happening. Now, using transparent borders we can do stuff like mountains.

Jam it back in, in the dark.

Haha, that's clever!

There's nowhere I can't reach.

This is actually an interesting test of CSS and such. In Firefox 3.0a6-pre, part of the image renders wrong. It might even be a genuine bug in Firefox 3

This thing is sticky, and I don't like it. I don't appreciate it.

Originally Posted by CHz

Haha, that's clever!

Aha, indeed!

I am a dolphin, do you want me on your body?

Originally Posted by ramoth

This is actually an interesting test of CSS and such. In Firefox 3.0a6-pre, part of the image renders wrong. It might even be a genuine bug in Firefox 3

Can you post a screenshot? I'm interested in that.

How ya doing, buddy?

I found this incredibly interesting and actually well done. Nice use of the border slant tech.

Do something else. Maybe slightly more detailed. =D

How ya doing, buddy?