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

У меня есть элемент, в котором я хочу иметь теневой акцент только на одном конце, как это (из Photoshop): enter image description here

Ближайший, который я получил, выглядит следующим образом (HTML + CSS3): enter image description here

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

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

ОТВЕТЫ

Ответ 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 для маскировки dropshadow. Вы могли бы достичь этого без дополнительной разметки через: после псевдоселектора, но: после того, как не играли хорошо с анимацией.

enter image description here

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

Ответ 2

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

Поместите два div, внутри которых вырезайте вкладку пополам по горизонтали, дайте им теней коробок и соответствующие граничные радиусы и слегка поверните их, а другой CW - другой CCW.

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

было бы лучше с 3D-преобразованием, но это только 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%;
}​

Ответ 3

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

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

(я отредактировал код Duopixel 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>

Ответ 4

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

После того, как вы разделите элемент на две части, вы получите некоторый css, который выглядит так:

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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