Aero effect in css

Question

How do i obtain aero glass box effect using css. My user can dynamically set the background image to be anything of his interest. So i want a glass box that will be dynamic and not like the ones that are developed depending on the specific background....

To be precise.. i want to achieve whats displayed in this link.. under the heading : They call me Mr.Glass: http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox

But that have to be dynamic and should apply to any background. And besides, i would also like some insight into how we get to know those color values appropriate for our purpose and create such effects even if it is specific to background..? Is it just experience or are they any tools..? please explain.... I would very much prefer a css technique to the above...

Answer 1

Ok I dont really understand what your issue is because the example you gave seems to work fine with a background dynamically set, look at this example:

http://jsfiddle.net/GGhKg/1603/

Relevant code:

   background: rgba(0,0,0,0.25);
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

Just click the link see what I'm talking about.

Is that what you meant?

Good luck!