Permanent Links


What should be the topic for the next Impossibly Stupid poll?

A Town Square Poll Space

Tech Corner

See Also

[ICO]NameLast modifiedSizeDescription

[PARENTDIR]Parent Directory  -  
[TXT]README.html2014-11-29 12:22 1.8K 
[DIR]css_bulge/2010-02-26 16:10 -  
[   ]info.json2014-12-09 01:41 40  
[   ]tags=play2015-03-26 18:30 0  

Check out my bulge

Simple minds like simple things. I guess that's why I like basic geometric shapes like circles, triangles, and squares so much. What could be easier than assembling millions of different colored squares to create everything from works of art to the words that you're reading on your computer monitor right now? A different pixel here, a different pixel there . . . nothing much . . . child's play, really.

Another thing a child's mind delights in, for the purposes of this post, is optical illusions. I certainly remember that I liked them as a kid, and still do. Around the web you'll find many great optical illusions. One in particular that I like on that page is "A bulge". I like it because it contains nothing but squares lined up on a grid, yet manages to produce the effect of curved lines.

Needless to say, rectangular shapes are easy to produce with the box model of web layout. That's certainly the foundation of how I developed the basic Town Square spatial content system. So on a particular slow day I got around to reproducing the image using only div elements and a little CSS. Enjoy:

As an added bonus, the HTML (15984 bytes) is quite a bit smaller than the original image (59287 bytes). There are many other variations on the same theme that it would be easy enough to reproduce with the style sheet I have, or I could possibly animate the bulge using JavaScript. Let me know if you'd like to see anything else interesting done with this.