dotkpay Posted January 27, 2012 Share Posted January 27, 2012 Hello, I am working on a layout that includes a glass effect and border radius. The effects work in all browsers except internet explorer. The code below is of a transparent glass box on an orange background but you just see a frame with no round corners in IE. The extra css code with 'rgba' colors is just additional background colors which are supposed to be controlled by a javascript function to display random backgrounds but that isn't necessary as I need just one background color. Could you please make my code compatible with IE so that it produces the same effect just like in firefox and opera. <html> <head> <style type="text/css"> body { background-color:orange; } #area { position:absolute; z-index:2; width: 300px; height: 300px; margin: 0 0 0 0; padding: 0; border: 1px solid rgba(0,0,0,0.5); border-radius: 10px 10px 10px 10px; 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); } </style> </head> <body> <div id="area"> <p> This is a Glass box with round corners. </div> </body> </html> Thanks in advance Quote Link to comment https://forums.phpfreaks.com/topic/255879-ie-glass-effect/ Share on other sites More sharing options...
Frank P Posted January 27, 2012 Share Posted January 27, 2012 Could you please make my code compatible with IE so that it produces the same effect just like in firefox and opera. That is going to be difficult because IE's support for inset and rgba is poor. If I'm informed correctly, both are not supported in IE<9, rgba maybe even not in IE<10. Quote Link to comment https://forums.phpfreaks.com/topic/255879-ie-glass-effect/#findComment-1311729 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.