Exploding Garrmondo Weiner Interactive Swiss Army Penis

Exploding Garrmondo Weiner Interactive Swiss Army Penis (http://www.gamingforce.org/forums/index.php)
-   The Creators' Cafe (http://www.gamingforce.org/forums/forumdisplay.php?f=10)
-   -   An painting using only XHTML/CSS, no images allowed (http://www.gamingforce.org/forums/showthread.php?t=21396)

MeTaL_oRgY May 16, 2007 09:18 AM

Painting using only XHTML/CSS, no images allowed
 
http://img249.imageshack.us/img249/4420/csspaintcq0.jpg
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.

Zigan May 16, 2007 11:37 AM

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. :)

YO PITTSBURGH MIKE HERE May 16, 2007 03:05 PM

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

MeTaL_oRgY May 16, 2007 03: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!

Dhsu Jun 22, 2007 08:47 PM

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...

THE POWER OF WATER Jun 22, 2007 10:50 PM

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. :3:

YO PITTSBURGH MIKE HERE Jun 22, 2007 11:00 PM

Quote:

Originally Posted by CHz (Post 457247)
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. :3:

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

Thanatos Jun 22, 2007 11:56 PM

Somehow I'm reminded of Katamari, damn rainbow.

MeTaL_oRgY Jun 23, 2007 02: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. ;)

THE POWER OF WATER Jun 23, 2007 02:39 AM

Haha, that's clever! :D

ramoth Jun 23, 2007 02:50 AM

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 :)

Dhsu Jun 23, 2007 02:59 AM

Quote:

Originally Posted by CHz (Post 457356)
Haha, that's clever! :D

Aha, indeed!

MeTaL_oRgY Jun 23, 2007 01:03 PM

Quote:

Originally Posted by ramoth (Post 457365)
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. :o

Reznor Jun 24, 2007 08:22 AM

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

Do something else. Maybe slightly more detailed. =D


All times are GMT -5. The time now is 01:31 PM.

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2025, vBulletin Solutions, Inc.