Как сделать тень с одной стороны

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

Проблема

Один из наиболее часто задаваемых вопросов относительно свойства  box-shadow, которые я получаю на веб-сайтах с вопросами и ответами, — как создать тень только с одной стороны (или, реже, только с двух). Быстрый поиск по  http://stackoverflow.com возвращает около тысячи результатов по данному запросу. И ничего удивительного, ведь отображение тени только с одной стороны создает более утонченный, но настолько же реалистичный эффект. Часто потерявшие надежду разработчики даже отправляют сообщения в список рассылки рабочей группы CSS, запрашивая создание новых свойств вроде  box-shadow-bottom,которые могли бы обеспечить такой результат. Однако подобные эффекты уже возможны при умном использовании старого доброго свойства  box-shadow, которое мы все знаем и любим.

Как сделать тень с одной стороны

 

 

Тень с одной стороны

Большинство разработчиков используют  box-shadow с тремя числовыми значениями и цветом, например, так:
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
Следующая последовательность шагов хорошо (хотя и не совсем точно с технической точки зрения) описывает процесс создания такой тени:

1.  Рисуется прямоугольник цвета  rgba(0,0,0,.5)с теми же габаритными размерами и в той же позиции, что и наш элемент.
2. Он смещается на  2px вправо и на  3px вниз.
3.  Он размывается на  4px с помощью алгоритма размытия Гаусса (или схожего). По сути, это означает, что цветовой переход по краям тени между цветом тени и полной прозрачностью будет приблизительно в два раза больше радиусаразмытия (в нашем примере это  8px).
4.  Размытый прямоугольник затем обрезается по контуру пересечения с нашим исходным элементом для создания впечатления, что он находится позади него. Это немного отличается от того, как большинство разработчиков визуализируют тени в уме (размытый прямоугольник под элементом). Однако в некоторых сценариях использования важно понимать, что никакая тень под элементом не рисуется. Например, если мы зададим для элемента полупрозрачный фон, то тени внизу мы не увидим. В этом отличие такой тени от  text-shadow , которая не обрезается по контуру текста. Использование радиуса размытия, равного  4px , означает, что габаритные размеры нашей тени приблизительно на  4px больше габаритных размеров элемента, поэтому часть тени будет выглядывать со всехсторон элемента. Мы могли бы установить другие значения сдвига, увеличив их как минимум на  4pх, чтобы спрятать тень сверху и слева. Но в результате у нас получится слишком уж бросающаяся в глаза тень, а это выглядит непривлекательно.


Кроме того, даже если бы это нас не беспокоило, изначально мы все же хотели получить тень только с одной стороны, помните? Решение предлагает нам менее известный четвертый числовой параметр, который указывается после радиуса размытия и носит название радиуса размазывания. Радиус размазывания увеличивает или (если он меньше нуля) уменьшает размер тени на  указанное вами значение. Например, радиус размазывания, равный  -5px , уменьшает ширину и высоту тени на  10px (по  5px с каждой стороны).
Отсюда логически вытекает, что если мы применим отрицательный радиус размазывания, абсолютное значение которого совпадает с радиусом размытия, то тень получит габаритные размеры, точно совпадающие с габаритными размерами элемента, для которого она определена. И если мы не будем двигать ее с помощью атрибутов смещения (первые два значения), то эту тень совершенно не будет видно. Следовательно, положительное значение смещения по вертикали позволит нам увидеть тень у нижней кромки элемента, но не вдоль остальных сторон — как раз тот эффект, которого мы пытались достичь:
box-shadow: 0 5px 4px -4px black;

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

Тень вдоль двух соседних сторон

Еще один часто задаваемый вопрос касается создания тени с двух сторон элемента. Если это соседние стороны (например, правая и нижняя), то все просто: можно либо удовлетвориться эффектом, аналогичным показанному выше, либо воспользоваться вариантом трюка из предыдущего раздела, но с некоторыми отличиями: ‰ сжимая тень, мы не должны пытаться убрать размытие с обеих сторон — только с одной. Следовательно, для радиуса размазывания необходимо указать значение, не противоположное радиусу размытия, а равное лишь его половине (с противоположным знаком); ‰ нам нужны оба смещения, так как тень необходимо сдвинуть и по горизонтали, и по вертикали. Значения смещения должны быть больше или равны радиусу размытия, поскольку вдоль остальных двух сторон тень должна быть полностью спрятана. Например, вот что нужно для создания черной (цвета  black ) тени шириной  6px  вдоль правой и нижней сторон элемента:
box-shadow: 3px 3px 6px -3px black;

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

Тень вдоль двух противоположных сторон

Ситуация становится еще запутаннее, когда у нас возникает необходимость создать тени с двух противоположных сторон, например слева и справа. Так как радиус размазывания применяется одинаково ко всем сторонам (то есть невозможно указать, что мы хотим увеличить тень по горизонтали, но сжать по вертикали), единственный способ решить задачу — использовать две тени, по одной с каждой стороны. В остальном это тот же трюк, что и рассмотренный выше в секрете «Тень с одной стороны», только примененный дважды:
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/shadow-opposite-sides
Десерт на сегодня - видео о том, как один паренек с Канарских островов начинает свой день ? :

Прочитано 798 раз Последнее изменение Суббота, 11 марта 2017 15:00
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

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

Google+