This a demonstration of an idea I had for doing dropshadows on any CSS block level element without using images. The initial idea is quite simple, wrap your display element in another element. Position both relatively sliding the outer one down 2 pixels, give the outer element a 1 pixel bottom and right border then shift the inner element up and left by 1 pixel. If you set the outer box background to a dark grey and it's border to a lighter grey you get a simple grey scale. This method is used on the new s1jobs site.
This got me to thinking though about adding additional containing boxes to add extra levels to the shading effect. The problem I had with this idea is you end up with a huge chunk of non semantic <div> tags lying around. Which got me to thinking about creating these elements with javascript.
The javascript to do this is quite simple, it loops through all the elements in the page to find those that have the class "todrop" as either the whole class or part of it.
You can even nest the drop shadowed boxes. See below for tricks to do this on different colored backgrounds.
Then it changes the "todrop" to "drop" and adds three child divs with the requisite classes, I could have used the > child selector but this is not cross browser compatible so went for multiple classes instead. The current code to create the child containers uses innerHTML as I was in a hurry. but it would be easy enough to use full DOM scripting.
The problem with the DOM scripting method is it seems to confuse older browsers like IE 5 (which I have to put up with) and newer browsers like Opera. Whilst the innerHTML method doesn't, such is life. Ah. turns out Opera wasn't liking some code I put in to makes sure this block would contain the quote. This is not that much of a problem, but the IE 5 issue is so innerHTML it is for now.
Went back and testing the DOM method in IE 5 and it's still not working, but really I'm not that bothered. Also for a bit of a laugh I added border, radii to the dropshadows. Of course these only work in Mozilla based browsers but this is a tech demo so live with it.
This is a demonstration quote.
Vix te partem copiosae sapientem, paulo recusabo sapientem ea ius, accumsan omnesque intellegat ut vix. Aliquyam repudiare cum ad, at mollis nusquam vituperata nam, vix integre sensibus eu. Eos ei libris bonorum, id vim tota postea docendi, et consul soluta graece vel. Cum eu omnis denique.
Solum timeam ad sit. Vel id corpora fastidii quaestio, mel diam incorrupte et, soluta denique propriae est ad. At amet dolores sea, no malis convenire vis, aeterno fastidii maiestatis ex vis. Eam tantas meliore et, et oportere iudicabit pri.
Timeam nusquam nam in. Eum et illud putent euripidis, ex decore labores legendos vel, aeque eleifend definiebas in cum. Sit utroque ceteros ne, duo ignota labores pertinax no, no iuvaret sententiae quo. Atqui reformidans no per, ex altera atomorum efficiendi eam. Atqui audiam consequat at sit, aeque persius petentium cu mei.
Te quod forensibus vis. Id vix altera numquam. Singulis gloriatur pri te, te cum delectus menandri iudicabit. In ius atqui laoreet, reque accusam referrentur et sit. Quidam eruditi detracto in eam, quodsi probatus an sed. Populo timeam vel eu, ludus utinam sed id. Ut mea tota iusto deleniti, cum regione pertinax no, inani comprehensam id eam.
Another trick I've added to the page is the haedings with letters
overlapping the alternate coloured underline. Quite a simple trick
really.
Another demonstation quote.
Vix te partem copiosae sapientem, paulo recusabo sapientem ea ius, accumsan omnesque intellegat ut vix. Aliquyam repudiare cum ad, at mollis nusquam vituperata nam, vix integre sensibus eu. Eos ei libris bonorum, id vim tota postea docendi, et consul soluta graece vel. Cum eu omnis denique.
Solum timeam ad sit. Vel id corpora fastidii quaestio, mel diam incorrupte et, soluta denique propriae est ad. At amet dolores sea, no malis convenire vis, aeterno fastidii maiestatis ex vis. Eam tantas meliore et, et oportere iudicabit pri.
Timeam nusquam nam in. Eum et illud putent euripidis, ex decore labores legendos vel, aeque eleifend definiebas in cum. Sit utroque ceteros ne, duo ignota labores pertinax no, no iuvaret sententiae quo. Atqui reformidans no per, ex altera atomorum efficiendi eam. Atqui audiam consequat at sit, aeque persius petentium cu mei.
Te quod forensibus vis. Id vix altera numquam. Singulis gloriatur pri te, te cum delectus menandri iudicabit. In ius atqui laoreet, reque accusam referrentur et sit. Quidam eruditi detracto in eam, quodsi probatus an sed. Populo timeam vel eu, ludus utinam sed id. Ut mea tota iusto deleniti, cum regione pertinax no, inani comprehensam id eam.