Shadows with CSS gradients

Дисклеймер: возможно это все уже давно известно и я в очередной раз изобрел велосипед, и может быть не самый лучший, но зато сколько удовольствия мне это доставило)

Задача: сделать тень для многостороннего блока.

Ход работы: Можно было бы воспользоваться решением Олега Мохова хитрая тень, но оно не работает если части блока имеют своё позиционирование, в таком случае их уже не получается бесшовно стыковать. Безрезультатно поигравшись с box-shadow и z-index, я решил попытать счастья с градиентами. И нашёл его!

Рецепт:

• 1 псевдоэлемент;
• css multiple backgrounds;
• css gradients (linear + radius) по вкусу.

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

Код:

http://codepen.io/bivihoba/pen/rHGph — своего рода эмуляция простого box-shadow. http://codepen.io/bivihoba/pen/JzLxm — реализация составного блока.

Плюсы:

• задание тени независимо для каждой стороны;
• можно безболезненно стыковать несколько блоков;
• реализация тени не привязана к размерам блока;
• работает во всех современных браузерах одинаково (пока разницы не заметил).

Минусы:

• много кода (пока вся надежда на gzip, а в будущем префиксы отвалятся);
• неудобно писать, особенно в первый раз.