shadow world in css

css box-shadow is available in every modern browser and in some browsers even text-shadow is supported. but the performance is often awful, animations are not possible and the appearance is different from browser to browser.

one small shadow is normally no problem, but often you need different shadows like box-shadow: 0px 0px 5px 10px #333, 0px 5px 10px 5px #336, 0px 0px 5px inset;. multiple shadows can create in nearly all browsers big performance problems. letters are not written in their dedicated textareas or input fields as well as the mouse might freeze etc.

but there is a possibility to use a lot of shadows for one element. you can use a canvas element. on this site a canvas element works in the background (take a look into the source code) and uses a different count for every browser. it helps to solve another problem too, I will explain more about that later. in opera browser over 200 shadows are active and no problems appear at all. if an animation starts it runs with the best possible performance.

all browsers have different shadow and some rendering issues (take a look at the screen shots).

firefox has a nice shadows but you see its color areas if the shadow is too big. Shadow doesn't need a direct element, a box with 0px/0px can already drop a nice shadow.

chrome/-ium have shadows with better antialising but a bigger core. It is also possible to drop a shadow with no direct element.

opera behaves more like real light. it is only possible to drop a shadow with a direct element and the blur area is always very small. you can use multiple shadows to gain a better result. if you look at opera screen shot, you see a white area. I needed an element and border-radius to create a round shadow in css animation/transition.

try out my 404 page for real big animation with css and a small one by the random log section of the side.

where are ie informations? nowhere, i use linux and on this page i dont worry about ie. i know ie supports box-shadows, canvas, no text-shadows and old filter shadows, that makes everything into shadow.

ps: this was my first entry, its hard to find a style. this will maybe take some time. but if you have trouble to understand something, write me via the contact form and if you found a mistake or have something to say (comment) use contact form too.