Gamingforce Interactive Forums
85240 35212

Go Back   Exploding Garrmondo Weiner Interactive Swiss Army Penis > Garrmondo Network > The Creators' Cafe
Register FAQ GFWiki Community Donate Arcade ChocoJournal Calendar

Notices

Welcome to the Exploding Garrmondo Weiner Interactive Swiss Army Penis.
GFF is a community of gaming and music enthusiasts. We have a team of dedicated moderators, constant member-organized activities, and plenty of custom features, including our unique journal system. If this is your first visit, be sure to check out the FAQ or our GFWiki. You will have to register before you can post. Membership is completely free (and gets rid of the pesky advertisement unit underneath this message).


An painting using only XHTML/CSS, no images allowed
Reply
 
Thread Tools
MeTaL_oRgY
Good Chocobo


Member 375

Level 18.41

Mar 2006


Reply With Quote
Old May 16, 2007, 09:18 AM Local time: May 16, 2007, 08:18 AM 4 #1 of 14
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.


Last edited by MeTaL_oRgY; May 16, 2007 at 09:59 AM.
Zigan
Parrell of Dissonance


Member 1916

Level 7.77

Mar 2006


Reply With Quote
Old May 16, 2007, 11:37 AM #2 of 14
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?
YO PITTSBURGH MIKE HERE
 
no


Member 74

Level 51.30

Mar 2006


Reply With Quote
Old May 16, 2007, 03:05 PM Local time: May 16, 2007, 12:05 PM #3 of 14
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.
MeTaL_oRgY
Good Chocobo


Member 375

Level 18.41

Mar 2006


Reply With Quote
Old May 16, 2007, 03:27 PM Local time: May 16, 2007, 02:27 PM #4 of 14
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?

Dhsu
`D`


Member 2206

Level 27.17

Mar 2006


Reply With Quote
Old Jun 22, 2007, 08:47 PM Local time: Jun 22, 2007, 07:47 PM #5 of 14
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

"Castitatis" (Elfen Lied - Lilium ~opening version~)
The Doujin Music Thread | backloggery
THE POWER OF WATER
listen here you little shit


Member 45

Level 48.64

Mar 2006


Reply With Quote
Old Jun 22, 2007, 10:50 PM Local time: Jun 22, 2007, 07:50 PM #6 of 14
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?
Undertale (PC, 2015)
YO PITTSBURGH MIKE HERE
 
no


Member 74

Level 51.30

Mar 2006


Reply With Quote
Old Jun 22, 2007, 11:00 PM Local time: Jun 22, 2007, 08:00 PM #7 of 14
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
Thanatos
What?!


Member 1546

Level 15.76

Mar 2006


Reply With Quote
Old Jun 22, 2007, 11:56 PM Local time: Jun 23, 2007, 12:56 PM #8 of 14
Somehow I'm reminded of Katamari, damn rainbow.

Most amazing jew boots
MeTaL_oRgY
Good Chocobo


Member 375

Level 18.41

Mar 2006


Reply With Quote
Old Jun 23, 2007, 02:33 AM Local time: Jun 23, 2007, 01:33 AM #9 of 14
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.

THE POWER OF WATER
listen here you little shit


Member 45

Level 48.64

Mar 2006


Reply With Quote
Old Jun 23, 2007, 02:39 AM Local time: Jun 22, 2007, 11:39 PM #10 of 14
Haha, that's clever!

There's nowhere I can't reach.
Undertale (PC, 2015)
ramoth
ACER BANDIT


Member 692

Level 35.27

Mar 2006


Reply With Quote
Old Jun 23, 2007, 02:50 AM Local time: Jun 22, 2007, 11:50 PM #11 of 14
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.
Dhsu
`D`


Member 2206

Level 27.17

Mar 2006


Reply With Quote
Old Jun 23, 2007, 02:59 AM Local time: Jun 23, 2007, 01:59 AM #12 of 14
Haha, that's clever!
Aha, indeed!

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

"Castitatis" (Elfen Lied - Lilium ~opening version~)
The Doujin Music Thread | backloggery
MeTaL_oRgY
Good Chocobo


Member 375

Level 18.41

Mar 2006


Reply With Quote
Old Jun 23, 2007, 01:03 PM Local time: Jun 23, 2007, 12:03 PM #13 of 14
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?

Reznor
Good Chocobo


Member 336

Level 19.24

Mar 2006


Reply With Quote
Old Jun 24, 2007, 08:22 AM #14 of 14
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?
Reply


Exploding Garrmondo Weiner Interactive Swiss Army Penis > Garrmondo Network > The Creators' Cafe > An painting using only XHTML/CSS, no images allowed

Forum Jump


All times are GMT -5. The time now is 06:17 PM.


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