Set CSS3 Box-Shadow Not to Be on Top of Div

Set CSS3 box-shadow not to be on top of div

You cannot do this with ONE div.

EDIT

box-shadow does not allow right and left shadows at the same time.

There is a trick, though...read on.

The rule takes four values:

1. defines the horizontal offset of the shadow. + value for a right shadow and - value for a left shadow.
2. defines the vertical offset. + value for a bottom shadow and - value for a top shadow.
3. defines the blur distance
4. defines the spread

That is all true. However, after some tests I found you can layer shadows.

All you need to do is separate the values with a comma.

So, for a left, right, and bottom shadow on one div, you can do this

box-shadow: -5px 5px 3px black, 5px 5px 3px black;

Example: http://jsfiddle.net/jasongennaro/HWCzJ/1/

CSS3 Question: how to have no box shadow on the top of a div?

If you can nest two divs then you should be able to use a combination of margins and overflow:hidden to 'chop off' the top shadow without losing the required effect on the other edges.

For example this mark-up:

<div class="outer">
    <div class="inner">hello</div>
</div>

And this CSS

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

Gives this result - http://jsfiddle.net/ajcw/SLTE7/2/

Box-shadow not appearing OVER a div with lower z-index

z-index only applies to element where the position has been set (i.e. not the default static position). Trying position:relative would be the most likely solution here.

CSS Box Shadow - Top and Bottom Only

As Kristian has pointed out, good control over z-values will often solve your problems.

If that does not work you can take a look at CSS Box Shadow Bottom Only on using overflow hidden to hide excess shadow.

I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this:

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

This will give you some control over the "amount" of shadow in each direction.

Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.

Hope this was what you were looking for!

Box-shadow on absolute positioned div with no content?

Somehow the box-shadow property in that situation need some minimal height render a shadow. I've managed to find a solution. See snippet below.

.layout {  width: 100%;  max-width: 500px;  margin: auto;}
.header {  height: 120px;  background-color: lightblue;  position: relative;}
.separator {  position: absolute;  width: 100vw;  height: 10%;  top: 95%;  /*border-bottom: 1px solid black;*/  box-shadow: 0 4px 3px -3px black; left: 50%; transform: translate(-50%, -50%);}
.main {  height: 150px;  background-color: lightgreen;}

<div class="layout">  <div class="header">    Header    <div class="separator"></div>  </div>  <div class="main">    Main  </div></div>

Creating a CSS3 box-shadow on all sides but one

In your sample create a div inside #content with this style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

and change #content style (remove paddings) and add shadow

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

add shadows to tabs:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

box-shadow on top of children

cant be done directly from css.. (it is not shadow if it goes above overlapping elements)

you would need to rework your html a bit by adding a div (or use a pseudo element as suggested by miguelcobain's answer) to overlay the shadow and your CSS to make the new div have the shadow..

#chatroom {  border: 1px solid #CCC;  height: 135px;  font-size: 0.75em;  line-height: 1.2em;  overflow: auto;  position: relative;}
.shadow {  position: absolute;  left: 0px;  top: 0px;  right: 0px;  bottom: 0px;  -moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);  -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);  box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);}
.chatmessage {  padding: 4px 2px;}
.chatmessage b {  margin-right: 2px;}
.chatmessage:nth-child(2n) {  background: #EEE;}

<div id="chatroom">  <div class="chatmessage"><b>User 1:</b>Test</div>  <div class="chatmessage"><b>User 2:</b>Test</div>  <div class="chatmessage"><b>User 1:</b>Test</div>  <div class="chatmessage"><b>User 2:</b>Test</div>  <div class="shadow"></div></div>

Box-shadow over next sibling div

Adding position:relative; will fix it. Though, it may affect other CSS tweaks you already have.

http://jsfiddle.net/2u4Lvyn0/5/

---

Related Topics