Best IT Recipes

CSS Box Shadow - Top and Bottom Only

Possible duplicate:
reduce shadow only from below css3

I cannot find examples of how to do this, but how can I add a window shadow only to the top and bottom of an element?

+85
css css3
Jul 12 2018-11-21T00:
source share
5 answers

As Christian pointed out, good z-value control often solves your problems.

If that doesn't work, you can take a look at CSS Box Shadow Bottom Only to use overflow hidden to hide the excess shadow.

I would also like to keep in mind that the box-shadow property can accept a list of shadows separated by commas:

box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;

This will give you some control over the โ€œamountโ€ of shadow in each direction.

See http://www.css3.info/preview/box-shadow/ for more information on box-shadow.

Hope this was what you were looking for!

+115
Jul 12 '11 at 10:18
source share

After some experiment, I found that the fourth value in the row controls the spread (at least in FF 10). I opposed vertical offsets and gave them a negative spread.

Here's a work pen: http://codepen.io/gillytech/pen/dlbsx

 <html> <head> <style type="text/css"> #test { width: 500px; border: 1px #CCC solid; height: 200px; box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC; } </style> </head> <body> <div id="test"></div> </body> </html>

This works great for me!

+75
Apr 14 '12 at 4:05
source share

So, this is my first answer here, and because I need something like that, what I did with the pseudo-elements for 2 inner shadows and an extra DIV for the upper outer shadow. I don't know if these are the best solutions, but maybe this will help someone.

HTML

 <div class="shadow-block"> <div class="shadow"></div> <div class="overlay"> <div class="overlay-inner"> content here </div> </div> </div>

CSS

 .overlay { background: #f7f7f4; height: 185px; overflow: hidden; position: relative; width: 100%; } .overlay:before { border-radius: 50% 50% 50% 50%; box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6); content: " "; display: block; margin: 0 auto; width: 80%; } .overlay:after { border-radius: 50% 50% 50% 50%; box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5); content: "-"; display: block; margin: 0 auto; position: absolute; bottom: -65px; left: -50%; right: -50%; width: 80%; } .shadow { position: relative; width:100%; height:8px; margin: 0 0 -22px 0; -webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6); box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6); border-radius: 50%; }
+4
Sep 19 '12 at 22:07
source share

I played with him, and I think I have a solution. The following example shows how to set Box-Shadow so that it displays only the shadow to be inserted above and below the element.

Legend : insetOption leftPosition topPosition blurStrength spreadStrength color

Description
The key to doing this is to set the blur value as <= a negative spread value (for example, insert 0px 5px -? Px 5px # 000, the blur value should be -5 or lower), and also keep the blur value> 0 when subtracting from the main positioning value (for example, using the example above, the blur value should be -9 or higher, which gives us the optimal value for the blur between -5 and -9).

Decision

 .styleName { /* for IE 8 and lower */ background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true); /* for IE 9 */ box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); /* for webkit browsers */ -webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); /* for firefox 3.6+ */ -moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); }
+3
Oct 14 2018-11-21T00:
source share

essentially a shadow is the shape of the window just shifted beyond the actual field. in order to hide parts of the shadow, you need to create additional divs and set their z-index over the shaded field so that the shadow is not visible.

If you want to have special control over your shadows, create them as images and create div containers with the right amount of padding and margins. Then use png fix to make sure that the shadows are displayed correctly in all browsers

0
Jul 12 2018-11-21T00:
source share


More articles:


All Articles