Nathan Nathan - 1 month ago 6
HTML Question

CSS box-shadow: Only apply to part of an element

I've got an element that I want to have a shadow accent just on one end, like this (from Photoshop):
enter image description here

The closest I've gotten is like this (HTML + CSS3):
enter image description here

So, is it possible to make the shadow fade, like in the first picture? Here's my code as is:

box-shadow: 0px 0px 5px 1px rgba(0,0,0,.4);

Answer

It is indeed possible to achieve this effect with CSS only, but the CSS is mind-bending:

.container {
  background-color: rgba(168,214,255,1);
  padding: 20px;
}
.tab {
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
}

.tab.active {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
   box-shadow: 0 0 15px #3680BD;
}

.tab .shadow {
  position: absolute;
  top: -10px;
  left: 50px;
  right: -20px;
  bottom: -10px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(168,214,255,0)), color-stop(80%,rgba(168,214,255,1))) 50 50 stretch;
  border-width: 10px 20px 10px 0;
}

You basically use border-image to mask the dropshadow. You would be able to achieve this without extra markup through the :after pseudo-selector, but :after doesn't play nice with animation.

enter image description here

View the demo on jsfiddle (Webkit only, but you can adapt it easily to FF. IE9 would be out of luck, unfortunately).

Comments