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

specific about what..? I mean, i want this glass box and it should work on all backgrounds, thats my requirement... — sasidhar
– sasidhar, Commented Dec 11, 2010 at 18:29

Trufa · Accepted Answer · 2013-11-20 09:58:43Z

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!

Eric Fortis · Accepted Answer · 2010-12-11 18:42:34Z

1

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.

answered Dec 11, 2010 at 18:42

Eric Fortis

17.5k6 gold badges44 silver badges63 bronze badges

1 Comment

Eric Fortis Over a year ago

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

Collectives™ on Stack Overflow

Aero effect in css

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related