2.19. CSS3-тень блока
Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.
Как сделать тень блока с помощью свойства box-shadow
Поддержка браузерами
1. Синтаксис свойства box-shadow
Свойство не наследуется.
Рис. 1. Синтаксис свойства box-shadow
| box-shadow | |
|---|---|
| Значения: | |
| x-offset | Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево. |
| y-offset | Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх. |
| blur | Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени. |
| растяжение | Задает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени. |
| цвет | Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно. |
| inset | Изменяет отбрасываемую тень блока с внешней тени на внутреннюю. |
| none | Значение по умолчанию, означает отсутствие тени. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.
Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.
Внутренние тени в CSS
Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
Синтаксис
Прежде всего рассмотрим два основных способа реализации теней в CSS.
box-shadow
Конструкция box-shadow содержит несколько различных значений:
Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
Край тени просто размывается. При различном значении spread radius видим следующее:
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.
text-shadow
Синтаксис очень похож на box-shadow:
Значения аналогичные, только нет spread-shadow. Пример использования:
Inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:
Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):
Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:
Изображения с тенями
Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:
Логично предположить, что добавить тень можно так:
Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:
Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:
Вот, что может получится при использовании внутренних теней:
Inset в text-shadow
Для реализации внутренней тени текста простое добавление в код inset не работает:
Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:
Вот, что получается:
Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
Поддержка браузерами
Проверить поддержку background-clip браузерами можно на caniuse.
Тёмная тема: приёмы, которые помогут сделать качественный интерфейс
Рассказываем про кейсы Google, Apple, Microsoft и «ВКонтакте» — главное, что нужно знать про разработку тёмной темы.
Тёмная тема стала популярной в 2018 году после её релиза на macOS Mojave. Её полюбили за удобство для глаз и возможность по-новому посмотреть на привычные интерфейсы.
Создание тёмной темы — сложная дизайнерская задача: под тёмный фон нужно подобрать новые цвета, сохранить общую узнаваемость интерфейса и читаемость текста. Рассмотрим, какие принципы и приёмы помогут вам сделать тёмную тему для собственного интерфейса на примере Google, Apple, Microsoft и «ВКонтакте».
Зачем нужна тёмная тема
Экономия батарей аккумуляторов с OLED-дисплеями
В отличие от обычных экранов, OLED-дисплеи полностью выключают пиксели на месте чёрного цвета. Например, если на странице чёрный фон и белый текст, OLED-дисплей активирует пиксели только для текста и тратит меньше энергии батареи. Благодаря этому пользователь видит глубокий чёрный цвет, а батарея устройства разряжается медленнее.
Наглядный эксперимент провело издание PhoneBuff. Оказалось, что в среднем тёмная тема экономит 30% заряда:
Комфорт для глаз
Исследования показали, что для людей с нормальным зрением нет принципиальной разницы, как читать текст: в тёмном или светлом окружении. Но людям с катарактой или другими проблемами со зрением удобнее воспринимать текст на тёмном фоне.
Фокусировка на задачах
Светлый контент в тёмном окружении привлекает к себе внимание — это помогает пользователю сфокусироваться на задачах, которые он хочет решить в приложении. Посмотрите, как выделяется письмо в приложении Mail в macOS — оторвать от него глаз невозможно:
Пользователи выбирают тёмную тему по разным причинам: кому-то она кажется более строгой, кому-то так удобнее воспринимать текст, кто-то хочет просто поменять цвета в привычном приложении. Хотя тёмная тема не обязательна, желательно дать пользователям возможность её использовать.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Опыт крупных компаний
Тёмная тема появилась во всех сервисах Google, Apple и Microsoft. Поэтому изобретать велосипед остальным дизайнерам уже не нужно — все принципы и приёмы давно проверены крупными корпорациями.
Фон и тени
Google применяет систему Material Design. В светлой теме плашки отделяются друг от друга по принципу «наслаивания»: каждый элемент интерфейса — это отдельный слой, который отбрасывает тень на предыдущий:
В тёмной теме это правило не работает, так как на чёрной поверхности тень того же оттенка увидеть невозможно. Чтобы разрешить это противоречие, дизайнеры Google выделяют слои высветлением: чем ближе объект к пользователю, тем он светлее. Тени не такие заметные, но они есть:
Теми же соображениями руководствовались дизайнеры мобильной версии Office 365 и «ВКонтакте»:
Apple хитро поступила с тенями в macOS. Их сделали насыщеннее и дополнительно усилили контраст с помощью чёрной обводки и внутренних бликов окна:
В стандартных приложениях macOS интересно реализован фон. Для окон добавили серый цвет, который смешивается со средним цветом обоев рабочего стола. Это позволяет приложениям в тёмной теме выглядеть гармонично на любых обоях: хоть на тёмных, хоть на светлых:
Цвет элементов интерфейса
Если инвертировать весь интерфейс, цвета на нём будут кислотными. Смотреть на такое приложение неприятно из-за высокого контраста:
На тёмном фоне насыщенные цвета выделяются гораздо сильнее. Например, яркий синий цвет хорошо выглядит в светлой теме, но в тёмной он кажется гораздо ярче:
Дизайнеры Google сформулировали правило для подбора цветов: чем темнее фон, тем светлее должны быть цвета элементов интерфейса. Каждый цвет разбили на яркостную градацию от 900 до 50 и подобрали наиболее контрастные и приятные глазу оттенки:
Цветовое правило работает не только с элементами интерфейса, но и с векторными иллюстрациями:
В том же направлении поработали и дизайнеры macOS. Каждому системному цвету подобрали тусклую пару для тёмной, чтобы цвета не «выжигали» глаза пользователей:
В тёмной теме macOS решили не только уменьшать непрозрачность текста белого цвета, но и подобрали оттенок серого, чтобы текст лучше читался на любом фоне:
Результат этой работы хорошо виден на боковой панели Finder:
Также важен контраст текста и фона. Приложением или сайтом с тёмной темой может пользоваться кто угодно, а значит, нужно подобрать удобные для всех цвета. Google, Apple и другие компании ориентируются на стандарт 1.4.6 WCAG: «Визуальное отображение текста и текст на изображениях должны иметь коэффициент контрастности не менее 7:1».
Совет. Чтобы проверить контраст своих цветов, зайдите на сайт Web Aim, введите код цвета текста в графу Foreground Color, а цвета фона — в Background Color. За образец контрастности можно брать значения Google и Apple — 15,8:1.
Иконки
Обычно иконки для интерфейсов рисуют контурами — делают только обводку, оставляя пространство внутри «пустым». Если сделать то же самое в тёмной теме, иконки станут слишком контрастными и будут выглядеть довольно странно:
В Apple решили, что раз стандартный подход делает иконки плоскими и портит формы, нужно не только инвертировать цвет, но и изменить подход к рисованию. Поэтому в тёмной теме все пиктограммы macOS залиты белым цветом:
Так же поступили и дизайнеры мобильной версии Office 365 — перерисовали иконки с использованием заливки:
При таком подходе иконки не теряют форму, остаются читаемыми и контрастными.
В Photoshop и Figma уровень прозрачности регулируется свойством Opacity — непрозрачность.
О чём нужно помнить при создании тёмной темы
Чтобы ничего не забыть при создании тёмной темы, придерживайтесь правил:
Законы светотени: от простых форм до портрета
Чтобы понять как изобразить объем, начинающих учат рисовать геометрические фигуры. Но как передать свет и тень на более сложных формах? Например в портрете? Рассмотрим законы светотени на примере рисунков различных объектов, в том числе рисунке головы человека.
Сначала немного теории
Мы видим окружающий мир благодаря тому, что свет отражается от поверхностей с разной силой. Поэтому мы воспринимаем предметы объемными. Чтобы передать иллюзию объема на плоскости, нужно научиться изображать светотень, которая состоит из:
На примере рисунка шара, куба и головы человека Вы можете увидеть где находятся перечисленные области светотени. Но теперь подробнее о каждой.
Кроме описанной последовательности, есть ещё одна закономерность. На схематичном рисунке видно, что если провести перпендикуляр к направлению света, то он совпадет с самыми темными местами предмета. Т. е. тень будет располагаться перпендикулярно свету, а рефлекс будет находиться на противоположной блику стороне.
Форма границы между светом и тенью
Следующее, на что нужно обратить внимание — это на границу света и тени. На разных предметах она приобретает разную форму. Посмотрите на рисунки шара, цилиндра, куба, вазы, и на рисунок головы человека.
Конечно, граница между тенью и светом чаще всего размытая. Четкой она станет только при ярком направленном свете, например, при свете электрической лампы. Но начинающим художникам следует научиться видеть эту условную линию, тот рисунок, который она образует. Эта линия везде разная и постоянно меняется в зависимости от изменения характера освещения.
На рисунке шара видно, что линия границы имеет изгиб, т. е. похожа на овальную форму. На цилиндре — она прямая, параллельная сторонам цилиндра. На кубе — граница совпадает с ребром куба. А вот на вазе, граница между светом и тенью представляет собой уже извилистую линию. Ну, а в портрете эта линия приобретает сложную, замысловатую форму. Граница света и тени здесь зависит и от характера освещения, и от формы головы человека, черт лица и анатомических особенностей. В данном рисунке она проходит по краю лобной кости, по скуловой кости, и далее вниз, к нижней челюсти. В рисунке головы человека очень важно различать светотень на всей голове в целом и светотень на каждом отдельном участке лица, например, на щеках, губах, на носу, подбородке и т. д. Начинающим художникам следует приучить себя видеть рисунок, который образует граница между светом и тенью. Например, особенно причудливый характер она приобретает в природных формах. Одно дело — рисовать простые геометрические фигуры, и совсем другое — стволы деревьев, листву, рельеф каменистого берега, лепестки цветов, траву… Чтобы научиться передавать объем или светотень на таких сложных объектах, сначала учатся на простом. Далее, усложняют задачу. Например, начинают с рисунка цилиндра, а с приобретением уверенности можно порисовать складки на тканях. Потом — натюрморты. Ну, а дальше, и пейзажем можно заняться или портретом.
Направленный и рассеянный свет
Чтобы легче было разобраться в вышеизложенных аспектах, можно поэкспериментировать со светом от настольной лампы. Она дает яркий и резкий свет, при котором хорошо видны рефлексы, тени… Попробуйте подсветить какой-либо предмет сначала с одной стороны, а потом — с другой. Попробуйте поменять направление света, приблизить или удалить лампу. Это поможет Вам наглядно увидеть все тонкости обсуждаемой темы.
В изобразительном искусстве есть прием, который получил название «кьяроскуро». Его суть заключается в противопоставлении света и тени. Известным художником, активно использовавшим кьяроскуро был Караваджо. На его полотнах хорошо виден этот прием. При искусственной подсветке создаётся среда, в которой свет становится очень ярким, а тень очень темной. Это даёт тоновой контраст и делает живопись насыщенной и резкой. При таком освещении хорошо видны все нюансы светотени и начинающим будет проще научиться передавать объем. При рассеянном дневном свете (когда облачно) тени не так сильно выражены как в солнечную погоду (или при свете лампы). Поэтому в процессе обучения лучше использовать искусственную подсветку с одним источником света. При нескольких источниках, ситуация усложняется и в постановке можно наблюдать несколько падающих теней, а вышеизложенная последовательность — свет-полутень-тень-рефлекс — может быть изменена.
Итак, чем же на практике отличается рисунок, когда используется направленный или рассеянный свет? На иллюстрации видно, что при яркой подсветке полутень становится уже, и будет выглядеть менее выраженной. Граница между светом и тенью хорошо заметна. А падающая тень имеет четкие края и выглядит более темной. При рассеянном свете — все с точностью до наоборот. Полутень шире, тень мягче, а падающая тень не имеет четкого контура — ее граница становится размытой.
Все эти особенности светотени будут заметны не только при электрическом свете или его отсутствии. Когда в ясный день светит солнце, свет будет четко направленным и резким. Когда облачная погода — он будет рассеянным. Соответственно это скажется на светотени деревьев, ландшафта или даже интерьера комнаты, освещенной светом из окна.
Заключение
Можно еще долго продолжать обсуждение данной темы. Но лучше всего наблюдать своими глазами за реальным миром. Как освещены объекты? Как меняется светотень и при каких условиях? Задавайте себе эти вопросы и находите ответы, когда наблюдаете за натурой. Нет ничего лучше натуры. Поэтому, помня описанные выше закономерности светотени, наблюдайте, запоминайте, делайте зарисовки с натуры. Тогда Вы сможете уверенно воплотить законы светотени на практике.
Что значит теневой фон
Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.
Рис. 1. Значения свойства box-shadow
Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.
Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.
Пример 1. Тень на фоновом рисунке
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2. Тень повторяет скругление уголков блока.
Рис. 2. Вид тени на фоновом рисунке
При добавлении «широкой» тени следует учесть, что она может выйти за пределы видимого окна браузера и привести таким образом к появлению горизонтальной полосы прокрутки.
Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.
Рис. 3. Блок с тенью
В примере 2 показано создание такого блока.
Пример 2. Блок с тенью
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Пример 2. Блок с тенью
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 4.
Рис. 4. Изображение с двойной тенью
Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра (-20px). Параметры второй тени указываются после запятой, тень отображается справа от рисунка и так же уменьшена для симметрии.
