Menu
Is it possible to create both an outer shadow for a 3D effect and an inner inset glow? I have a div with a lime green background that's on top of a blue div. So far, I have the following:
.greendiv{ background:darkgreen; box-shadow: box-shadow: 10px -7px 15px darkgray; box-shadow: lightgreen 0px 0px 3px inset; } The actual colors are in #ffffff format. It seems that the second declaration cancels the first one. Is there a way around this?
695
You can comma separate box-shadow any many times as you like.
Note: By default, the shadow generates outside the box but by the use of inset we can create the shadow inside the box. Syntax: box-shadow: h-offset v-offset blur spread color | inset; Approach: To give the inset shadow to an element, we will use the box-shadow property.
box-shadow: h-shadow v-shadow blur spread color inset; In your example you're offsetting shadow by 10px vertically and horizontally. Like in other comments set first two values to 0px in order to have even shadow on all sides.
You simply declare box-shadow once, and use both versions inside, separated with a comma:
http://www.w3.org/TR/css3-background/#the-box-shadow
The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword.
So, for you:
.greendiv { background: darkgreen; box-shadow: 10px -7px 15px darkgray, lightgreen 0px 0px 3px inset; } See: http://jsfiddle.net/JzsAh/
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
