The Halftone Illusion
The CSS techniques used here are nothing more than the normal way of putting edges over a textured background.
The thing that bends the eye here is the edges themselves. Our eyes want to see the dots as the edge over a white background. But in truth, the white is the edge, the 'dots' are just transparency (Scroll down to the images if you don't believe me!) The shadows reinforce the illusion by giving solidity to what isn't there and forcing the eye away from the white and onto the pattern. They also make the page seem to 'float' over the false 'white background', when in reality the white is layered over the top of the page!
For variation, the 'edge' can have a pattern or a color, too. Or no shadows. Each is a different effect.
Bonus! If you have Adobe Photoshop (or Photoshop Elements) you can download the original .PSD files to make your own colors or patterns! Please be sure to give me credit if you use 'em on your page--thanks!
| Mix 'n' Match! 972 possible combinations!! | |
| < Left Edge |
Right Edge > |
Backgrounds | |
To save space, Left, Right and Both styles are all displayed on this page plus solid and textured backgrounds. Have fun changing edges and backgrounds with the buttons below (turn one edge off to see the left or right styles.) Do you think it works better with with contrasting or similar colors? What's your favorite combination? (Javascript required to change the colors by changing the CSS class of the body)
Some combinations to try:
- Plain white left, red background, plain black right
- Blue Shadow Edges & Subtlefuge or solid blue background
- Small white left, silver background, small grey right
- Small black edges, gold flow background
- Small white edges and solid yellow background
- Shadow edges and a white background
- Firey-Left, Blue-Right, Sand or Grass background
- Anything with the "Transparency"
background-- just to force your eyes away from the illusion!
Note: One of the backgrounds is FIXED in the body block. If works, but kind of spoils the illusion.
Images and Sample CSS:
 141x159 halftone-fireshd.gif |
 141x159 halftone-fireshd-r.gif |
|
 141x159 halftone-shd.gif |
 141x159 halftone-shd-r.gif |
|
 141x159 halftone-blushd.gif |
 141x159 halftone-blushd-r.gif |
|
 141x159 halftone-wht.gif |
 141x159 halftone-wht-r.gif |
|
 141x159 halftone-blk.gif |
 141x159 halftone-blk-r.gif |
|
 42x61 halftonefine-blk.gif |
 42x61 halftonefine-blk-r.gif |
|
 42x61 halftonefine-wht.gif |
 42x61 halftonefine-wht-r.gif |
|
 42x61 halftonefine-gry.gif |
 42x61 halftonefine-gry-r.gif |
|
 256x256 goldenflow.jpg |
||
 369x100 sand.gif |
||
 256x256 grass.jpg |
||
 256x256 subtlefuge.jpg |
||
 100x100 whitewood.jpg |
 64x64 TRANSBACK.gif |
|
<HEAD>
<STYLE><!--
BODY {
background: url(grass.jpg) #0a0;
color: #fff;
height:100%;
margin:0;
}
.Shadow-L {
background: url(halftone-shd.gif) repeat-y left;
padding-left:136px;
/* use this padding too if not using right side
padding-top:1em;
padding-bottom:1em;
padding-right:1em;
*/
}
.Shadow-R {
background: url(halftone-shd-r.gif) repeat-y right;
padding-right: 136px;
padding-top:1em;
padding-bottom:1em;
padding-left:0;
/* use this padding-left if not using left side
padding-left:1em;
*/
}
--></STYLE></HEAD>
<BODY><DIV class=Shadow-L><DIV class=Shadow-R>
(content)
.
.
.
</DIV></DIV></BODY>
| ||