CODEWITHSUNDEEP
htmlshadowcss
Nathan
Nathan

Reputation: 7032

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);

Upvotes: 11

Views: 8571

Answers (6)

bekorn
bekorn

Reputation: 354

I also achieved the same effect you wanted in a different way. I gave the shadow-div a little rotation with perspective. It also got behind of the active-tab with the transform-style: preserve-3d; property automatically. This made the effect you made on photoshop.

Just wanted to share ^^

(I edited Duopixel's jsfiddle code)

.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;
  transform: perspective(150px);
  transform-style: preserve-3d;  /*  this puts shadow behind the .tab.active without the need of z-index. */
}

.tab.active .shadow {
  position: absolute;
  top: 0px;    left: 0px;
  right: 0px;  bottom: 0px;
  border-radius: 20px;
  transform-origin: left center 0px;
  transform: rotateY(6deg);
  box-shadow: 0 0 10px 2px  #050d4b;
}
<div class="container">

  <div class="tab"></div>

  <div class="tab active">
    <div class="shadow"></div>
  </div>

  <div class="tab"></div>

</div>

Upvotes: 1

yunzen
yunzen

Reputation: 33439

I found some other solution:

Put two divs inside which cut the tab in half horizontally, give them the box-shadows and appropriate border-radii, and rotate them slightly, the one CW the other CCW.

http://jsfiddle.net/Zb5Qn/32/

would be better with 3d transform, but that is only webkit

HTML

<div class="container">
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
    <div class="tab active">
        <div class="shadow1"></div>
        <div class="shadow2"></div>
        <div class="content">Tab2</div>
    </div>
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
</div>​

CSS

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

.tab.active .content {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
    position:relative;

}
.tab .content {
    position:relative;
    z-index:2;
 background: red;   
}
.tab .shadow1 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 0;
    left: 0;
    right:10px;
    bottom: 50%;
    border-radius: 20px 0 0 3px;
z-index: 1;

    -moz-transform: rotate(0.5deg);
-moz-transform-origin: 0 50%;
    -webkit-transform: rotate(0.5deg);
    -webkit-transform-origin: 0 50%;
    -o-transform: rotate(0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(0.5deg);
    -ms-transform-origin: 0 50%;




}

.shadow2 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 50%;
    left: 0;
    right:10px;
    bottom: 0;
    border-radius: 3px 0 0 20px;
    z-index: 1;
    -webkit-transform: rotate(-0.5deg);
-webkit-transform-origin: 0 50%;
    -moz-transform: rotate(-0.5deg);
-moz-transform-origin: 0 50%;
    -o-transform: rotate(-0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(-0.5deg); 
    -ms-transform-origin: 0 50%;
}​

Upvotes: 2

MayThrow
MayThrow

Reputation: 2201

try this - box-shadow: -5px 0px 13px -3px #333;

-3px is the shadow-spread. lower it to reduce the area of shadow.

Upvotes: 0

methodofaction
methodofaction

Reputation: 72385

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).

Upvotes: 13

stefs
stefs

Reputation: 18549

i think it might be possible by creating shorter length clones of the bars below the real bars, apply the drop shadow to the clones and hide the cloned bars with a color transition to transparent.

really messy, but i can't think of any other way.

put those over each other (first layer on top, third layer at the bottom).

edit: damn, i accidentially used the wrong bar for the first layer! it should have been a bar without drop shadow. sorry for that!

i don't think there's a clean solution, though.

Upvotes: 0

tjarratt
tjarratt

Reputation: 1690

You'll want to break up the element into two parts - one part for the left with the shadow which would only need to be a few pixels - probably not more than five - the rest of the element will be everything that does not need to have a shadow.

After you break up the element into two parts, you'll have some css that looks like this:

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

#right-no-shadow
box-shadow 0px 0px 0px 0px

Upvotes: 0

Related Questions