Как убрать тень под border-bottom?

Question

[Mrako_bes]

Как убрать тень под Responsive Website?

Код:

.tab-header__item.active {
   color: #5f5f5f;
   position: relative;
   top: 2px;
   background-color: #fff;
   border: 1px solid #dedede;
   box-shadow: 0 0 5px rgba(194,194,194,0.6);
   border-bottom: none;
   font-family: "SegoeWP_SemiBold";
}

Если убрать box-shadow, то все норм:

Тень нужна только сверху и по сторонам

Comments

[Medin K]

Вам бы песочницу создать с имеющейся разметкой.

[Mrako_bes]

Medin K, какую еще песочницу?

[Rustam Bainazarov]

Mrako_bes, мда…

Jsfiddle, Codepen.

Answer 1

[Арсений Матыцин]

Как вариант указать z-index «ниже» основной плашки.

А так я кажется это уже видел тут, с месяц чтоль назад. Все никак?)

UPD: А квест действительно интересный, я так-то очень давно с такой ерундой давно не сталкивался. Мой вариант с z-index имеет место быть с доработками. А вообще он скорее непригоден, так как я забыл про тень, которая будет накинута не от таба, а на таб.
А вариант Дмитрий плох тем, что при изменении параметров тени для одного объекта, визуально мы отрываем его от другого, создавая другую глубину. Это хорошо заметно на размытии в 15px и более (см третий таб).

А в целом классово верным решением будет border-image или все-таки svg, как я отвечал по ссылке на предыдущий вопрос тематики. И с двумя вариантами придется помудохаться.

Comments

[Mrako_bes]

я только сегодня начал это делать, путаешь

[Арсений Матыцин]

Ну да, это был другой начинающий.

Как правильно оформить тени и border на tab-вкладках?

Чье задание, если не секрет?

[ReActor Дмитрий Вершанский]

Используйте все параметры box-shadow: x y blur color;

Первые два параметра - управление точкой источника света по двум осям, за счет верных совокупных значений, в том числе и степени размытия ( blur) вы решите свою задачу

[Mrako_bes]

Арсений Матыцин, простая верстка, в интернете нашел, практикуюсь

[Mrako_bes]

Дмитрий, получилось, просто поставил отрицательное значение y, спасибо

[Mrako_bes]

Арсений Матыцин, psd-html-css.ru/templates/leo-professionalnyy-psd-...

[Арсений Матыцин]

— Сколько нужно дизайнеров, чтобы сверстать макет?
— Целая группа!

Спасибо, позабавил. Не пойму только, в чем тенденция именно к этому и ему подобному шаблону. Весь экшон на дрибблах, пинтерестах и инстаграмах. Хочешь реально прокачать навык и попутно почувствовать боль и ненависть к дизайнерам — иди туда. Некоторые очень даже не против, чтобы их работы заверстывали (читай описания). Почему хз, наверное нравится доставлять страдания верстальщикам сайтов)

[ReActor Дмитрий Вершанский]

Mrako_bes, рад быть полезен!

[Mrako_bes]

Арсений Матыцин, инстаграммах? Еще не понял про дриббл, там постятся макеты сайтов? Там можно скачать psd?

[Арсений Матыцин]

Mrako_bes, да, например по хештегу #uidesign. Массы, конечно способны испоганить все (я про всякие бьюти-фьюти с постингом еды), но инста это все-таки бизнес инструмент, как и дриббл и иже.
Нет у меня под рукой подборки, с хорошим каналами, но они есть в списке, на кого подписан канал моей команды.

На dribble публикуется в принципе все, что относится к дизайну, в том числе работы художников. И да, под работами можно встретить урлы на psd.

А в остальном верстка на глаз — основной квест. Второй — моушн (анимация). Тут вряд ли кто даст тайминги (я не видел), так что подобрать на глаз это тот еще квест.

[Mrako_bes]

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

[Арсений Матыцин]

Mrako_bes, осваивать фотостоки типа pixabay и основы пользовательского ввода.

Для цвета пипетка. И т.д.

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