HAY GUYS

MeTaL_oRgY · 09:59 AM

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.

MeTaL_oRgY · Local time: May 16, 2007, 02:27 PM

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!

There's nowhere I can't reach.

MeTaL_oRgY · Local time: Jun 23, 2007, 01:33 AM

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.

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

MeTaL_oRgY · Local time: Jun 23, 2007, 12:03 PM

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?