CODEWITHSUNDEEP
css
Laila
Laila

Reputation: 343

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

Right now when I do this:

-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;

it gives a box shadow on all sides. I want it on 3 sides but not the top. How to prevent the shadow from appearing at the top?

Upvotes: 34

Views: 67319

Answers (4)

ajcw
ajcw

Reputation: 23804

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: 

.outer {
  margin-top: 50px;
  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;
}
<div class="outer">
  <div class="inner">hello</div>
</div>

Upvotes: 15

Jacob Stamm
Jacob Stamm

Reputation: 1863

Use a pseudo-element to cover the edge of the element you don't want to have a shadow. This is similar to ajcw's approach, but doesn't require manually adding the extra element every time — just once, in your CSS — and uses absolute positioning, which I think is much cleaner.

.nav-link.active {
  position: relative;
  box-shadow: 0 0 5px #888;
}

.nav-link.active::after {
  position: absolute;
  content: ' ';
  height: 7px;
  bottom: -8px;
  left: -5px;
  right: -5px;
  background-color: white;
  
  /*this one's only needed because we don't want this pseudo-element to be clickable*/
  pointer-events: none; 
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="p-4">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab 3</a>
    </li>
  </ul>
</div>

Upvotes: 1

Syafiq Freman
Syafiq Freman

Reputation: 784

box-shadow support multiple commas which mean this is possible and can be done like below:

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

The first group bring shadow to the right & bottom while the second group bring shadow to the left (by using negative value) & bottom.

The complete code for cross browser support is:

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

Upvotes: 48

cdeszaq
cdeszaq

Reputation: 31290

Just have a vertical offset only:

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

This will shift the shadow down so that the top has less of a shadow. You will have to play with it to get it the way you want it in your situation. This site also has some great info on box shadows, such as layering, as well as browser support.

Upvotes: 5

Related Questions