CSS box-shadow: применяется только к части элемента

Question

У меня есть элемент, который я хочу, чтобы на одном конце был акцент тени, как это (из Photoshop):

Самое близкое, что я получил, это (HTML + CSS3):

Итак, можно ли заставить тень исчезать, как на первом снимке? Вот мой код как есть:

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

Answer 1

Этого эффекта действительно возможно достичь только с помощью CSS, но CSS поразителен:

.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;
}

Вы в основном используете border-image, чтобы замаскировать тени. Этого можно добиться без дополнительной разметки с помощью псевдо-селектора: after, но: after не очень хорошо работает с анимацией.

Просмотр демонстрации на jsfiddle (только для Webkit, но вы можете легко адаптировать его к FF. IE9, к сожалению, не повезет).

Answer 2

Я нашел другое решение:

Поместите два делителя внутри, чтобы разрезать язычок пополам по горизонтали, дайте им тени для ящиков и соответствующие радиусы границ и слегка поверните их, один против часовой стрелки, другой против часовой стрелки.

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

было бы лучше с 3D-трансформацией, но это всего лишь веб-набор

---

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%;
}​

Answer 3

Я также достиг того же эффекта, который вы хотели по-другому. Я дал тень-div немного rotation with perspective. Он также автоматически закрывается активной вкладкой со свойством transform-style: preserve-3d;. Это сделало эффект, который вы сделали в фотошопе.

Просто хотел поделиться ^^

(я редактировал код jsfiddle Дюопикселя )

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

Answer 4

попробуйте это - box-shadow: -5px 0px 13px -3px # 333;

-3px - это распространение тени.опустите его, чтобы уменьшить площадь тени.

Answer 5

Я думаю, что это может быть возможно путем создания клонов более короткой длины столбцов под реальными столбцами, применения тени клонов и скрытия клонированных столбцов с переходом цвета в прозрачный.

действительно грязно, но я не могу думать ни о каком другом.

поместите их друг на друга (первый слой сверху, третий слой снизу).

edit: блин, я случайно использовал не ту полосу для первого слоя! это должен был быть столбик без тени. прости за это!

Я не думаю, что есть чистое решение, хотя.

Answer 6

Вы захотите разбить элемент на две части - одну часть слева с тенью, которая должна составлять всего несколько пикселей - вероятно, не более пяти - остальная часть элемента будет всем, что делает не нужно иметь тень.

После того, как вы разбьете элемент на две части, у вас будет несколько CSS, которые выглядят так:

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

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