Зачем используют несколько значений box-shadow?

Question

[rurobud]

Не могу понять этого. Часто встречаю лапшу из значений box-shadow через запятую. Два, три. Зачем? Как это работает? Что это дает? Почему нельзя обойтись одним значением box-shadow?

Answer 1

[Ankhena]

Это значит что применены несколько теней

https://html5book.ru/css3-ten-bloka/
websketches.ru/blog/css-teni

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

Comments

[rurobud]

Ужас! Ну так как же тогда понять как оно работает? Ну накладывает тень на тень, как в этой лапше понять что-то. Ужас... Или это делается методом тыка, ха-ха-ха?

[rurobud]

Ну т.е. я понимаю как работает меняя значения отдельной тени. Но когда этих теней 3 - это что за вынос мозга? Как оно будет совмещатся. Ну бред какой-то.

[Ankhena]

rurobud:

Как оно будет совмещатся.

Просто. Одна накладывается на другую. Самая последняя - нижняя и т.д.
Точно также как множественные фоны.
Или точно также как надевается пиджак на рубашку, а между ними еще галстук есть.

[rurobud]

Ankhena W: ага, т.е. они наслаиваются как background множественный например. Ок, а если тень с прозрачностью, то естесвенно все работает логически, тоже смешивается?

[rurobud]

Хорошие ссылки, но я встречаю лапшу из 3-х значений на обычной блин тени, типо Материал дизайн, а не такое необычное как по ссылке. Поэтому ума не приложу - зачем так усложнять.

[Ankhena]

rurobud: Вот вам еще кучка примеров для ответа на вопрос "зачем": https://codepen.io/search/pens?q=shadow&limit=all&...

Затем, что иначе придется вставлять текст картинкой, а это, сами понимате, отвратительно.

[rurobud]

Ankhena W: а зачем это мутить на простых тенях? Вот смотрите (ховер на карточки) - https://scotch.io/tutorials

3 значения. Зачем?))

[Ankhena]

rurobud: 3 не вижу, вижу 2. Для того, чтобы вниз тень была "больше и гуще". Почему оно так должно выглядеть это скорее вопрос к дизайнеру.
Разные дизайнеры и клиенты требуют разную степень соответствия верстки макету. Кому-то достаточно, чтобы была просто любая тень от блока. А кто-то требует максимально полного совпадения.

[rurobud]

Ankhena W: спасибо. Проясняется. Я когда-то читал шутку про веб-дизайнера, который делал тень 3 часа. Теперь я ее понял)))

[Ankhena]

rurobud: угу, только часто это не шутка и 3 часа не предел. Фантазии дизайнеров неисповедимы.

Answer 2

[VisualIdeas]

ПРосто одновременно несколько теней)))

Comments

[rurobud]

ЗАЧЕМ?

Answer 3

[Алексей Черток]

Используют несколько теней, которые до этого сделал дизайнер в своем макете.

Если нужна внешняя тень, используют просто box-shadow: 0 1px 3px rgba(0,0,0,0.1) например, если нужна внутренняя, то box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), собственно если надо обе, указывают обе, через запятую.

Comments

[rurobud]

https://scotch.io/tutorials - зачем тут 2 значения. Обычная епта тень))