Aero effect in css

Question

How to get the effect of aeroson using css. My user can dynamically set the background image to any of his interests. Therefore, I want the glass box to be dynamic, and not the one that was developed depending on the specific background ....

To be precise, I want to achieve what is displayed in this link .. under the heading: My name is Mr. Glass: http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text- shadow-box-shadow-and-border-radius / # glassbox

But this should be dynamic and should apply to any background. And besides, I would also like to know how we learn the color values ​​that are suitable for our purpose, and create such effects, even if they are specific to the background.? Is it just an experience or is it some kind of tools ..? please explain .... I would very much prefer to use the css technique above ...

Answer 1

Good. I really don't understand what your problem is, because the example you gave works fine with a dynamically configured background, 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 to find out what I'm talking about.

Is that what you meant?

Good luck

Answer 2

this method will be as follows: Make the glassBox css code into a class. Instead of div {} use .glass {} and place it on top of the background image, for this you will need to copy the css attributes from the background div that you want to change.