Search the Community

Are gradients backgrounds animatable by transition yet? I googled a answer and only found ones that were years old or had long work-arounds. I'm wondering if there is some new code to use that I am just overlooking. Thanks ahead, -Line

Hi, I'm relatively new to CSS, and have been trying to learn to use some of the newer CSS3 features recently. I've been trying to get an effect looking similar to lens vignetting around the edges of a web page and decided to try using the "box-shadow: inset [etc...]" property to do so.However, for some reason when I apply this to my "body" in CSS, the effect does not extend to the bottom of the page. Instead, it seems to be constrained to the extent of the padding around the body element. The only reason I thought it would make sense to add the box-shadow to the body in the first place was because I assumed the body applied to the whole page (I reasoned that if the background-image tiles an image infinitely, regardless of how long the page becomes, the same would apply to the box-shadow property). Obviously, putting the box-shadow on the body was the wrong decision; I'm just wondering how best to get an inset box-shadow to consitently cover all four edges of the frame of the web page and stick/scale with the page to fit different window sizes. The existing method I used does all of that except extend to the bottom edge of the page. Here's the body div in question: body {background-image:url('bg-pattern.png');padding: 4em;margin: auto;font-family: Arial, Helvetica, sans-serif;font-size:100%;color: rgb(215,215,215);box-shadow: inset 0px 0px 250px 0px black;-webkit-box-shadow: inset 0px 0px 250px 0px black;-moz-box-shadow: inset 0px 0px 250px 0px black;background-color: #333333;height: 100%;} And I've attached an image of the problem as well.