Когда не хватает псевдоэлементов или как спозиционировать тень

[Launder]

Вот иллюстрация. Тень должна исходить из выделенного блока(визуально, там видно откуда, и видно, что сейчас сделано криво). По-идее, это должен быть span, но в оригинальной задаче, span должен быть сам по себе, а тень должна исходить либо из самого пункта (класс every), либо из какого-либо нейтрального потомка, а какой потомок "нейтрален"? псевдоэлемент, его мы может подогнать под нужные размеры, поставить нужный z-index и сделать для него тень.

Беда только в том, что для последнего элемента (крайнего справа), свободного псевдоэлемента не осталось. Что делать? Обязательно для всех меняющихся элементов, которые видны на иллюстрации, в том числе и для тени, нужен транзишн.

Поэтому всевозможные изыски с градиентами проблематичны, поскольку напрямую градиент не транзитируется  только через opacity. Но прозрачность меняется для всего элемента(псевдоэлемента) сразу, а значит скрывать полоски и показывать одновременно тень элемент не сможет.

Были мысли также про какие-то изыски с границей, но опять-таки, двухцветную границу можно сделать только через border-image, а как плавно менять его прозрачность? (понятно, что если нам форма не важна, мы можем тупо сделать левую и правую границу и через opacity менять прозрачность элемента. Но нам же нужно чтоб этот элемент ещё показывал тень, поэтому нам важна как форма, так и прозрачность элемента и менять в угоду полосочкам ни то, ни другое, мы не можем. полосочки как-нибудь сами должны).

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

Благодраю за внимание, буду рад Вашим свежим идеям! 

ЗЫ: можно, ещё сделать две тени, но поскольку тень также нельзя увеличить только в одну какую-то сторону, то процесс подгонки тени (которая в разных браузерах, и рисуется всё-таки немного по разному), большая, отдельная, нудная тема, которую не хотелось бы открывать, лучше чтоб тень исходила из элемента совпадающего по форме с тем, из которого она исходит визуально.

ЗЫЗЫ: чисто теоретически, для градиента можно сделать плавный переход, вот что сказано в спецификации:

Цитата

The following describes how each property type undergoes transition or animation.

gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.

Но на практике у меня это не заработало. Может у кого-то заработает?  

Edited September 17, 2017 by Launder

[mrnobody]

может через box-shadow сделать эти градиенты, вот пример:

 

[Launder]

Спасибо большое! Очень интересная идея. Сейчас подумаю, как её перелопатить для моего случая.

[Launder]

Ну вот, в общем, получилось.

С тенями, сложности, в основном, такие:

При переходах, они исходят из, а не просто появляются, что, с одной стороны и логично и красиво, но поскольку тени мы применяем несколько не по назначению, нам это лишнее. Второе - когда мы используем тень внутрь (inset) они появляются/исчезают мгновенно. А поскольку этим свойством пользоваться, в некоторых случаях удобно, то обходиться без него - неудобно.

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

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

[mrnobody]

Какое-то необычное у вас задание )

Интересно было-бы увидеть его в конечном виде, а то не понятно для чего оно применяется.

[Launder]

Для меню.

http://htmlbook.ru/practical/nispadayushchee-menyu

https://webref.ru/layout/html5-css3/list/use

Вдохновившись, в своё время этим, ваяю многоуровневое адаптивное меню  Спан (в оригинале блочная ссылка) и тень участвуют в наложении по z-плоскости и должны находиться на разных уровнях. Надеюсь, я это когда-нибудь доваяю, наберусь смелости, и выложу на суд общественности...

Edited September 20, 2017 by Launder