Support for inserting shadows in Safari

Question

I have a mailbox on one of my sites that has this property:

-moz-box-shadow:inset 0 0 50px #ecf4de; -webkit-box-shadow:inset 0 0 50px #ecf4de; box-shadow:inset 0 0 50px #ecf4de; 

This gives the graph a nice gradient towards the center. However, Safari does not support the "inset" property, and IE does not support the shadow box at all. I cannot use the image for this because the height of this window changes for each situation.

I do not want to use 3 images (one for the top, repeating for the middle and one for the bottom), as this can cause very dirty code.

So I ask if there is any way to create a window shadow in all browsers.

EDIT: Does anyone know any javascript snippet that can do this? Just wondering...

Answer 1

The latest version of Webkit (and probably many earlier) supports inset . It will probably go to Safari for the next release.

However, you cannot do this in all browsers without tricks with three images. Internet Explorer is not going to cooperate with you otherwise.

Saying, I don't think your goal should be to get the same results across all browsers. I think that you should get decent results in all browsers, but it's normal that web pages in Safari or Firefox look better than in Internet Explorer 7. In addition, only web developers compare the rendering of web pages in different browsers.

Answer 2

Agreed; to be honest, I’m not embarrassed that my pages look pale and vile in Internet Explorer than the main browsers. The content is still readable, accessible and navigable: but it turns out that the pixel is perfect for browsers. In any case, this will simply give Microsoft more incentive to improve CSS3 browser support.

Personally, I think the inset flag is one of the most amazing features that box shadows promise ... besides the elements suppressing the "cut" effect, the insert shadows can also be used to create glowing edges and corner shading, an effect that cannot be easily achieved using direct background gradients (especially with rounded edges). The ability to insert shadows opens up many possibilities for web design.

Knowing that Safari did not support this, I was worried that at some point it could be dropped from the specification: God does not know why there is no reason to refuse something so useful. > _>

Answer 3

inset Support for Safari 5.0

http://www.css3.info/preview/box-shadow/

Answer 4

You may have more luck with the Overlay Method, the first of Jordon Dobson 's methods here that uses radial gradients.

But the image still requires height and width (especially in Chrome).

 /* Overlay Method */ figure.overlay::after{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; z-index: 2; pointer-events: none; /* "all" disables mouse access to image */ /* Mozilla Setting */ background-image: -moz-radial-gradient( center, circle contain, rgba(0,0,0,0) 125px, rgba(0,0,0,.5) 250px ); /* Webkit Setting */ background-image: -webkit-gradient( radial, 50% 50%, 125, 50% 50%, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)) ); }