Как сделать падающую тень неправильной формы

Оцените материал
(0 голосов)

Проблема

Свойство  box-shadow прекрасно работает, когда нам требуется тень, отбрасываемая прямоугольником или любой другой фигурой, которую можно создать с помощью border-radius (несколько примеров вы найдете здесь). Однако от него гораздо меньше пользы, когда мы работаем с псевдоэлементами или другими полупрозрачными вариантами декорирования, потому что  box-shadow бессовестно игнорирует прозрачность. Приведу несколько примеров:‰ полупрозрачные изображения, фоновые изображения и рамки, созданные с применением  border-image (например, винтажная рама с позолотой); ‰ штрихпунктирные рамки, рамки с точечным пунктиром и полупрозрачные рамки без фона (или со значением  background-clip , отличным от  border-box ); ‰ облачко с текстом, указатель для которого создан с помощью псевдоэлемента; ‰ скошенные углы, аналогичные тем, которые мы учились делать в секрете "Как срезать углы на css"; ‰ большинство эффектов загнутого уголка, включая описанный далее в этой
главе; ‰ контуры, создаваемые с помощью  clip-path , например ромбовидные изображения из секрета «Как сделать ромб на css».

 Элементы, стилизованные с помощью CSS, с которыми использование box-shadow теряет всякий смысл (здесь применяется значение свойства box-shadow, равное 2px 2px 10px rgba(0,0,0,.5))
Существует ли решение для подобных случаев или нам придется вообще отказаться от использования теней?

 

Решение

Спецификация Filter Effects  предлагает решение данной проблемы в форме нового свойства filter, позаимствованного из формата SVG. Однако несмотря на то что фильтры CSS — это, по сути, те же самые фильтры SVG, для их использования никакого знания SVG не требуется. Они определяются посредством нескольких удобных функций, таких как  blur() ,  grayscale() и — барабанная дробь —  drop-shadow() ! Можно даже составить последовательность из нескольких фильтров, если того требует ситуация, разделив их пробелами, например так:
filter: blur() grayscale() drop-shadow();
Фильтр  drop-shadow() принимает те же параметры, что и базовое свойство box-shadow , то есть без радиуса размазывания, без ключевого слова  inset , без разделенных запятыми определений нескольких теней. Например, вместо:
box-shadow: 2px 2px 10px rgba(0,0,0,.5);
мы бы написали:
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
Результат применения этого фильтра  drop-shadow() к элементам


Лучше всего в фильтрах CSS то, что они обеспечивают изящные резервные решения: когда фильтры не поддерживаются, ничего не ломается, просто никакой эффект не применяется. Вы можете добиться чуть лучшей поддержки браузерами, используя заодно фильтр SVG, если перед вами стоит задача любыми способами заставить этот эффект работать в как можно большем количестве браузеров. Соответствующие фильтры SVG для каждой функции фильтрации вы найдете в спецификации Filter Effects. Можно одновременно использовать и фильтр SVG, и упрощенный аналог на CSS, позволяя каскадным стилям самим определять победителя:
filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
К сожалению, если SVG-фильтр содержится в отдельном файле, то он не поддается такой же простой настройке, как приятная, удобная в использовании функция прямо в CSS-коде, а строковая функция, в свою очередь, захламляет код. В файле параметры  фиксированы, и иметь несколько файлов на случай, если нам понадобятся слегка различающиеся тени, непрактично. Мы могли бы использовать URI данных (что заодно сэкономило бы нам несколько запросов HTTP), но они также приводят к увеличению размера файла. Поскольку фильтр SVG используется для обеспечения обходного решения, имеет смысл использовать один или два варианта, даже для немного отличающихся фильтров  drop-shadow(). Кроме того, не следует забывать, что отбрасывать тень будет любая непрозрачная область, независимо от того, каким элементом она представлена, — даже текст (на прозрачном фоне). Возможно, вы думаете, что отменить этот эффект можно с помощью  text-shadow :  none; , но text-shadow — это отдельное свойство, не способное компенсировать влияние фильтра  drop-shadow() на текст. А если вы используете  text-shadow для создания настоящей тени текста, то благодаря фильтру  drop-shadow() у этой тени также появится своя тень, то есть вы создадите тень тени! Взгляните на следующий пример CSS-кода (и простите за безвкусный результат — я всего лишь пытаюсь продемонстрировать всю дикость этой проблемы):

color: deeppink;
border: 2px solid;
text-shadow: .1em .2em yellow;
filter: drop-shadow(.05em .05em .1em gray);


Пример визуализации этого кода вы видите на рисунке здесь показана как тень  text-shadow , так и отбрасываемая ею тень  drop-shadow() .

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/drop-shadow

Десерт на сегодня – видео о том, как можно сделать интересную головоломку из деревянного бруска и болта. Я не знал, что деревяшка может "расти" от кипятка ? :

 

Прочитано 311 раз Последнее изменение Воскресенье, 12 марта 2017 13:55
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Wix.com INT

TemplateMonster

Поиск по сайту

Kwork

Google+