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...

Solution 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!

Solution 2

the technique would be: Make the glassBox css code into a class. Instead of div{} use .glass{}, and put it on top the background image, for this you'll need to copy the css attributes from the background div you want the users to change.

Comments

[Eric Fortis]

as Akinator said, you need to be more specific, because it looks that you are underestimating the complexity of the process to achieve this.