![]() |
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. |
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. :)
|
Very cool. I'd love to see more, if you ever feel like making some.
|
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! |
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... |
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: |
Quote:
|
Somehow I'm reminded of Katamari, damn rainbow.
|
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. ;) |
Haha, that's clever! :D
|
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 :)
|
Quote:
|
Quote:
|
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.