CSS-дисплей уничтожает тень: после и: до

Question

CSS-дисплей уничтожает тень: после и: до

0

Я показываю тень в нижней части моей навигации: http://jsfiddle.net/A6xYV/

nav {
    border-bottom: 1px solid #DDD;
    max-width: 960px;
    margin: auto;
    top: 40px;
    position: relative;
    background: #FFF;
}
nav:before, nav:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 10px 10px #777;
    -moz-box-shadow: 0 10px 10px #777;
    box-shadow: 0 10px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
nav:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    display: block; // HERE IS THE PROBLEM - IT SHOULD BE INLINE!
    padding-top: 4px;
    padding-bottom: 4px;
    border-right: 1px solid #CDCDCC;
}

Это работает отлично. Но я хочу, чтобы мои навигационные элементы отображались: inline; http://jsfiddle.net/gWafk/

Почему это не работает?

zerophreak 10 апр. 2014, в 21:07

Источник

1

Ваша тень должна иметь высоту около 120 пикселей для отображения. Вот почему это не проявляется в вашем втором примере.
vals 10 апр. 2014, в 18:22
0

@vals Как я могу уменьшить минимальную высоту?
zerophreak 10 апр. 2014, в 18:23
0

@zerophreak изучите свойства min-height и max-height .
TylerH 10 апр. 2014, в 18:26
0

Нет способа сделать это жидким? В случае изменения высоты?
zerophreak 10 апр. 2014, в 18:26
0

Не угонять, но см. Решение ниже для "дружественного подхода"
iamnotsam 10 апр. 2014, в 18:49

Показать ещё 3 комментария

Теги:

html

css

css3

2 ответа

Ещё вопросы

Ваша тень должна иметь высоту около 120 пикселей для отображения. Вот почему это не проявляется в вашем втором примере.
@vals Как я могу уменьшить минимальную высоту?
@zerophreak изучите свойства min-height и max-height .
Нет способа сделать это жидким? В случае изменения высоты?
Не угонять, но см. Решение ниже для "дружественного подхода"

iamnotsam · Answer 1 · 2014-04-10T16-27-00.000Z

Исправлена. Проблема заключалась в том, что в основном устанавливался top относительной высоты. Вы можете увидеть проблему, если вы удалите один <li> за раз, видя, что происходит с тенью каждый раз. Я также сделал фоны этих тендер-производящих divs прозрачными, так что он работает на разных высотах.

UPDATE для меньшей ширины до 320 пикселей: http://jsfiddle.net/iamnotsam/gWafk/8/

Я не вижу никаких изменений на этой скрипке .. :(
Извините, смотрите сейчас. Я не правильно поделился, я думаю.
Кроме того, придерживаясь базового подхода, который вы применяете с shadow-from-extra-divs, тень со временем будет кровоточить по краям, когда вы становитесь все более и более узкими, поэтому я определил минимальную ширину в 320px, чтобы предотвратить это. Чтобы достичь такого же эффекта на еще меньшей ширине без этого «отбрасывания тени», вещи могут стать волосатыми и, возможно, потребуется совершенно другой подход. Я могу ошибаться, но я старался не отклоняться от основной идеи, которую вы имели.
Ммм, ладно .. В любом случае, спасибо!
Хороший ответ, хорошо отформатированный.

Arbel · Answer 2 · 2014-04-10T15-32-00.000Z

1- On nav:before, nav:after изменения top: 80%; top: 35%;

2- На nav ul li если вы хотите применить paddings, измените display: inline; для display: inline-block;

Демо- версия http://jsfiddle.net/gWafk/2/

Спасибо ... Работает на высотах, но если ширина уменьшается, например, до 200, он перестает показываться снова (чуть-чуть осталось)