Эта тень вкладки возможна только в CSS?

Question

Возможно ли дублировать эффект тени, который вы видите здесь: http://a.imagehost.org/0835/sample.png без каких-либо изображений и с использованием только CSS?

Позвольте мне уточнить .... посмотрите на тень, она вокругвкладка и сам блок контента, а не просто тег div ...

Answer 1

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

Вот демо: http://jsfiddle.net/xFbfp/1/

Answer 2

попробуйте это:

#tab {
    -moz-box-shadow: 0px -10px 5px #888;
    -webkit-box-shadow: 0px -10px 5px #888;
    box-shadow: 0px -10px 5px #888;
    z-index: 1;
}
#content {
    -moz-box-shadow: 0px 0px 5px #888;
    -webkit-box-shadow: 0px 0px 5px #888;
    box-shadow: 0px 0px 5px #888;
    z-index: 0;
}

http://www.css3.info/preview/box-shadow/

Answer 3

Ну, это два абсолютно позиционированных элемента div, с индексом вкладки div, z-index над содержимым элемента div.Вы просто устанавливаете смещение -y на 3 пикселя для тени вкладки и размытие на 3 пикселя, и все готово.Чтобы поиграть с ним, вам нужно использовать rgba с альфа-значением .5, чтобы получить правильный эффект тени.

Answer 4

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

Answer 5

Только идея ...

Если вы используете div´s: Вы можете попробовать использовать z-index с вкладкой div и выровнять его по содержимому div, чтобы покрыть тень (содержимого div) ...

Но круглые углы - это проблема между вкладкой и содержимым div ...

Answer 6

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

Answer 7

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

OR

Вы можете использовать CSS3, чтобы сделать это примерно так:

#mydiv
{
   box-shadow: 10px 10px 5px #888;
}