Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSMulti-position shadow boxing

Date : Pre 2006

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Bottom left

eggs

Bottom centre

eggs

Top centre

eggs

Summing it up

eggs eggs


Information

This is my attempt at producing something a little different from the millions of css drop-shadow methods already available on the web

This one is a multi-position method that does not limit you to having the shadow in one position only. With this one it can be resized to fit any image and positioned where you like beneath it.

This one does not use absolute positioned background images but uses an absolute positioned displayed image so that it can be placed where you want over the background shadow.

The shadow is made up of background images placed in a series of ems which are floated into position. A few calculations are required to make the shadow the correct size for each image but this is not difficult and if you look at my code then you will see that it is fairly straightforward.

As with all of the other available methods, that use only css, this does require extra markup which is not semantically correct but a few extra em tags didn't hurt anyone ;o)

It also works in IE5.5

If anyone wants to convert this into javascript then be my guest. This site, however, is CSS only so I will not be attempting this.

Again, now that we have box shadow styles this is more or less redundant.


Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


For more CSS demonstrations
I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page