Как сделать тень в html css

Как сделать тень при наведении css

CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом. Для создания эффекта, когда тень появляется при наведении курсора мыши на элемент, необходимо использовать псевдокласс :hover .

 class="box-with-shadow"> У этого элемента будет тень 

.box-with-shadow  /* Ширина блока */ width: 250px; /* Внутренние отступы */ padding: 32px; /* Цвет фона в элементе */ background-color: #38d9a9; /* Сделаем видимую границу элементу */ border: 1px solid #333; > .box-with-shadow:hover  /* Свойство отвечающее за формирование тени 8px - отступ по оси Х 10px - отступ по оси Y 5px - радиус размытия тения 2px - радиус распространения rgba - функция формирующая цвет тени */ box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2); > 

Изучаем CSS: тень блока

Желание повысить видимость текста или блока, сделать его более красочным подталкивает нас к всевозможным приемам таким, как, например, тени CSS . И если в Photoshop это делается очень быстро и элементарно, то в CSS придется немного потрудиться. А теперь обо всем по порядку.

Как сделать тень в CSS – коротко о главном

Если вы зададите поисковику запрос « как сделать тень в CSS », то в абсолютном большинстве случаев в выдаче вы найдете ссылку на CSS3 . С его приходом эти и другие дизайнерские эффекты создавать стало гораздо проще.

Как сделать тень в CSS — два варианта реализации

• Тени блока в CSS — box-shadow . Это свойство состоит из нескольких параметров:

Vertical offset и horizontal offset — это вертикальное и горизонтальное смещение. С помощью этих параметров мы задаем направление, в котором объект будет отбрасывать тень:

Чтобы сделать жесткую CSS тень, установите степень размытия 0 или вообще не задавайте это значение. Если требуется задать несколько свойств блока, укажите их через запятую.

• Тени текста в CSS — text-shadow

Свойство text-shadow поддерживают все популярные браузеры ( Google Chrome, Firefox, Opera, Safari ). Text-shadow имеет четыре параметра:

• Смещение по горизонтали ( положительное – вправо, отрицательное – влево );
• Смещение по вертикали ( положительное — вниз, отрицательное – вверх );
• Радиус размытия;
• Цвет тени.

По синтаксису text-shadow во многом напоминает box-shadow:

При этом spread-shadow отсутствует. Вот так это может выглядеть на примере:

Базовая тень в CSS

Создадим css файл и укажем в нем следующее:

body < background: #ccc; margin: 0;>div < background-color: #fff; width: 400px; height: 200px; padding: 15px; margin: 15px; float: left;>.shadow < box-shadow: 5px 5px rgba(150,150,150,0.5);>     

Смещать тень можно изменяя значение 5px , а задавать тот или иной цвет, применяя rgba . В таком случае у нас получается вот такая тень:

Размытая тень

CSS будет вот такой:

body < margin: 0; padding: 0; background: #ccc;>.shadow < margin: 30px; background: #fff; width: 494px; height: 294px; border-radius: 3px; box-shadow: 0 10px 2px -10px rgba(0,0,0,0.3); font: 15px "Sans-Serif", "Times New Roman"; padding: 3px;>     
Some text.
  

Получаем вот такую тень, которая хорошо будет смотреться под слайдерами:

Двойная тень текста CSS

Синтаксис

shadow-text-double

В одном элементе можно использовать несколько теней. Для этого необходимо прописать параметры обеих теней после двоеточия, разделив их запятой:

Тень по бокам блока в CSS

.boxShadow2

Внутренняя тень CSS

Чтобы « развернуть » тень объекта внутрь, достаточно добавить в CSS inset :

Внутренняя тень блока в CSS — inset в box-shadow

Чтобы « перевернуть » тень внутрь объекта, необходимо добавить inset в CSS :

Если вы сумели разобраться с основным синтаксисом свойства box-shadow , то сделать внутреннюю тень CSS вам не составит труда. Единственный нюанс — можно дополнительно указать цвет в формате RGBA :

Альфа-значение будет отвечать за прозрачность тени:

Внутренняя тень текста CSS: inset в text-shadow

Для создания внутренней тени текста, недостаточно просто добавить inset в код:

Сначала можно применить к h1 светлую тень и темный фон:

У вас получится:

Тень блока div в CSS

Создает тень div CSS :

.boxShadow

Тень внизу блока в CSS

.boxShadow1

Тень картинки в CSS

Добавить тень к изображению несколько сложнее, чем к обычному div . Например, изначально картинка выглядит так:

Можно добавить тень картинки CSS следующим образом:

box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);

Однако ее плохо видно:

Решить эту проблему можно, обернув изображение в div :

div < height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);>img

Далее следует установить изображение фоном нужного блока:

Тень шрифта в CSS

Тень шрифта с множеством оттенков:

Тень внутри блока в CSS

Добиться эффекта появления тени внутри блока, можно прописав:

body h2 p .bsh-wrap .bsh-shad .bsh-shad:after .bsh-inner

Можно добавить тень с одной или нескольких сторон блока:

boxShadow3

.boxShadow4

Тень вокруг блока в CSS

.boxShadow8

Тень внизу блока в CSS

.boxShadow1

Кроме того, можно поместить тень внизу блока и поменять ее цвет и степень размытия.

Генераторы CSS-теней – эффективные решения

Для упрощения создания нужных эффектов существуют специальные CSS3 -генераторы. Вот самые удобные и функциональные из них:

CSS3 Generator

С помощью CSS3 Generator можно создать до десяти разных эффектов, таких как, например, закругленные углы, плавный переход, тень блока CSS . Генератор очень прост и удобен в использовании:

CSS Gradient generator

В этом генераторе собраны все инструменты для создания идеального CSS -градиента:

CSS button generator

Это один из самых продвинутых CSS -генераторов. Установите параметры, скопируете сгенерированный код и готово!

CSS3Gen

Хороший генератор тени CSS , позволяющий создавать полезные фрагменты и с легкостью переносить их в свой проект. Этот CSS3 -генератор позаботится обо всех префиксах для популярных браузеров:

CSS3 Please

Отличный вариант для тестирования CSS3 -кода: с помощью редактора вносите изменения в CSS -стили, и блок мгновенно изменится, а вы сможете увидеть результат:

Как создать тени на CSS: свойство box-shadow

CSS-свойство box-shadow добавляет тень вокруг элемента — внутри или снаружи. В зависимости от того, какую тень вы создадите, элемент будет казаться объёмным или глубоким:

Для чего использовать box-shadow

Чтобы выделить интерактивные элементы. Например, если у вас на сайте есть кнопки или ссылки, можете добавлять им тень при наведении мыши.

Чтобы показать важное на странице. Тень подчеркнёт элементы, на которые посетители сайта должны обратить внимание.

Чтобы сделать сайт интереснее. Вы можете использовать свойство в декоративных целях, чтобы сделать какие-то элементы сайта более эффектными и яркими.

�� Используйте тени с умом, не злоупотребляйте ими.

Синтаксис box-shadow и примеры создания теней

Тени добавляются так:

селектор элемента

Смещение и размытие задаётся в пикселях, цвет указывается в формате RGBA. Например, здесь мы добавляем тень со смещением в два пикселя по горизонтали и вертикали, размытием четыре пикселя и полупрозрачным чёрным цветом:

button

Получается такая кнопка:

По умолчанию тень находится справа и снизу, но такое поведение легко исправить — например, разместить её слева и сверху. Для этого нужно задать смещению отрицательные значения:

button

Кнопка станет такой:

Внутренние тени

Внутренняя тень создаёт эффект глубины в элементе. Чтобы её добавить, нужно перед остальными значениями box-shadow написать параметр inset :

button

Сложные тени

Для таких эффектов нужно скомбинировать несколько теней с разными параметрами — это делается через запятую:

button < box-shadow: 0 2px 4px rgba(235, 238, 23, 0.3), /* Жёлтый цвет */ 0 6px 10px rgba(0, 0, 0, 0.1); /* Зелёный цвет */ >

Мы добавили кнопке две тени: жёлтую с меньшим размытием и зелёную с большим смещением.

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

В этом примере мы добавили кнопке фон с помощью градиента, переход идёт от красного #ff0000 в верхнем левом углу к зелёному #00ff00 в нижнем правом углу. И дополнительно мы применили box-shadow , чтобы у элемента появились две тени — внутренняя и внешняя.

Генератор теней

Если сложно запомнить значения свойства, используйте генератор box-shadow . Он помогает настроить смещение, размытие, прозрачность и цвет теней.

Добавить тень

Код тени

Скопируйте его и используйте в своих CSS-стилях.

Советы по использованию box-shadow

• Избегайте чрезмерного использования теней.
• Не бойтесь экспериментов с разными значениями свойства — они помогут найти интересные эффекты.
• Учитывайте доступность. Тени могут влиять на визуальное восприятие элемента и его контента, например, снижать контрастность текста по отношению к фону. Поэтому проверяйте, чтобы текст или другой контент внутри элемента оставался читаемым и понятным.
• Если вы создаёте тени по наведению курсора, используйте плавные переходы. С ними эффект будет выглядеть более естественно.
• Перед использованием свойства проверьте его поддержку браузерами на сайте caniuse.

Материалы по теме

• Как вставить изображение фоном
• Как добавить картинке фильтры
• Как раскрасить элемент: CSS-свойство color

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

Что такое CSS?

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

Как подключить CSS к HTML

Есть несколько способов использования CSS внутри HTML:

Внутренний CSS: внутри раздела HTML-документа, в теге :

Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :

Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.

Этот текст будет красного цвета.
 

Основы синтаксиса CSS

CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.

/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >

Работа с цветом и фоном

Одни из самых основных свойств в CSS — это цвет и фон элементов.

color меняет цвет текста:

background-color меняет фоновый цвет элемента:

Типографика и шрифты

CSS позволяет нам контролировать шрифты на странице:

• font-family задаёт шрифт текста, даже если он нестандартный.
• font-size определяет размер текста.
• font-weight устанавливает жирность шрифта.

Блочная модель

Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .

Внутренние и внешние отступы одной картинкой:

Позиционирование и Flexbox

Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.

.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >

Адаптивный дизайн

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

@media (max-width: 600px) < .container < flex-direction: column; >> 

Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! ����‍��

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

3 способа использовать box-shadow в CSS

Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.

Что за свойство box-shadow?

Свойство box-shadow позволяет добавить тень вокруг элемента на веб-странице. Тень подсказывает пользователю, является ли элемент — кнопка, картинка — интерактивным. Благодаря теням, вне экранов гаджетов мы получаем представление о размере и глубине объекта, и свойство box-shadow добавляет реализм в оформление сайта.

Вот как обычно это свойство box-shadow прописывают:

box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)

Первый четыре значения такие:

1. x-offset, определяет горизонтальное положение тени;
2. y-offset, определяет вертикальное положение тени;
3. радиус размытия, который влияет на резкость тени. Чем выше значение, тем менее насыщенные тени, и наоборот;
4. четвёртое значение определяет распространение тени.

Все значения, кроме радиуса размытия, могут быть отрицательными. Если сделать тень, как описано выше, она окажется внизу элемента. Но если значения заменить на отрицательные, то тень будет сверху:

box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5)

Если установить распространение на 0 px, тень будет такого же размера, что и элемент. Положительное значение сделает тень больше, отрицательное — уменьшит.

Как сделать тени реалистичными

Следующее значение в свойстве — цвет. Используем цвета rgba() с альфа-каналом, чтобы указывать непрозрачность: это важно для стилизации под реальность, ведь тени в хорошо освещённых местах не чисто чёрные и не слишком плотные. Можете понаблюдать, как тени ведут себя по отношению к источникам света и к поверхностям, на которых лежат. Самые тёмные тени падают на плоскости, которые ближе всего к объекту, а дальше они размываются. Поэтому тень не должна быть похожа на чёрную обводку.

Почему не нужен фильтр dropshadow()

Это фильтр, который добавляет тень вокруг изображения. Его работа сильно отличается от box-shadow . Вот как выглядит разница в коде:

box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3); filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));

Основы box-shadow

Чтобы потренироваться, создайте простой контейнер HTML:

 Затем CSS:

div < height: 150px; width: 150px; background: #fff; border-radius: 20px; >.box

Вот что получится:

Как использовать box-shadow с псевдоклассом :hover и свойством transform

На box-shadow может повлиять псевдокласс :hover . Он добавляет тень к компонентам, у которых её не было, или меняет существующую тень. Вот как это выглядит со свойством transform :

.box:hover

Свойство transform создаёт иллюзию того, что блок приподнимается на странице. Функция translate() изменяет размер окна.

Добавьте ключевое слово inset , чтобы поместить тень внутрь рамки блока или элемента. Так блок будет казаться погружённым в страницу.

.box2 < box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5); >.box2:hover

Значения можно менять, сколько захотите. Вот как выглядят тени на примерах:

Альтернативой функции translate() будет scale() . Если translate() изменяет положение тени по осям x и y, scale() увеличивает размер блока по этим же осям. Во втором поле добавьте значение scale() в :hover . Размер блока увеличится в 1,1 раза.

.box2:hover

Создание многослойных теней

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

box-shadow: 0px 1px 2px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1), 0px 4px 8px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1);

Значение распространения не указано — в данном случае не нужно, но эксперименты никто не запрещает.

Если установить значения смещения и радиуса размытия на 0 и добавить значение распространения одной тени, к блоку добавится граница.

box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5), 0px 2px 4px rgba(0,0,0,0.1), 0px 4px 8px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1);

Технически эта граница — тень, поскольку блоку в родительском элементе не занимает места. Вот результат применения двух методов, обратите внимание на гладкую и тонкую тень на левой рамке:

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

Создаём неоновые тени

В реальности тени обычно серые или чёрные, разной степени прозрачности. Чтобы изменить цвет тени, надо поменять источник света. В вебе вместо этого применяют box-shadow . Попробуем на примере:

.box < box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.7); >.box2

Если тени наслаивать друг на друга, свечение можно сделать ярче:

box-shadow: 0px 1px 2px 0px rgba(0,255,255,0.7), 1px 2px 4px 0px rgba(0,255,255,0.7), 2px 4px 8px 0px rgba(0,255,255,0.7), 2px 4px 16px 0px rgba(0,255,255,0.7);

Лучше всего такие тени смотрятся, если сделать их контрастными цветами на тёмном фоне. Яркость можно менять с помощью прозрачности.

Создаём неоморфные тени

Визуально интересный эффект, который имитирует объекты из реальной жизни, такой 3D на минималках. Первые два эффекта, которые мы потренируемся создавать, касаются плоских компонентов, которые как бы парят над страницей, отбрасывая тени на фон. Кажется, что перед нами рельефное изображение.

box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12);

Рельеф можно направить и в глубину:

box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12);

Вот какой будет результат. Белая тень показывает направление «источника света» и работает, как блик. Похоже на реальный мир:

Попробуем сделать переключатель, на который пользователь сможет «нажимать».

Для начала делаем чекбокс.

input[type="checkbox"] < height: 200px; width: 200px; top: 50%; left: 50%; -webkit-appearance: none; box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5), 10px 10px 15px rgba(70, 70, 70, 0.12); position: absolute; transform: translate(-50%, -50%); border-radius: 50%; /*Makes the circle*/ border: 20px solid #ececec; outline: none; display: flex; align-items: center; justify-content: center; cursor: pointer; >

Добавляем иконку. В примере иконка из Font Awesome.

input[type="checkbox"]::after < font-family: FontAwesome; content: "\f011"; /*ON/OFF icon Unicode*/ color: #7a7a7a; font-size: 70px; >

Задайте свойства, которые отображаются при нажатии на кнопку. Добавьте box-shadow внутри круга, чтобы создать два вложенных слоя.

input[type="checkbox"]:checked

Установите цвет значка после щелчка.

input[type="checkbox"]:checked::after

Поддержка box-shadow в браузерах

К сожалению, не все браузеры, особенно в ранних версиях, поддерживают box-shadow . Так что надо использовать расширение webkit .

-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For webkit browsers*/ -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For Firefox*/ box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

Например, для корректного отображения в Chrome с 4 по 9 версию нужен префикс -webkit- . Mozilla Firefox в версиях 2 и 3 свойство не поддерживается и частично поддерживается в версии 3.5 and 3.6 (с префиксом -moz- ). Safari частично поддерживает свойство в версиях 3.1 и 4 с префиксом -webkit- . Opera поддерживает во всех версиях, кроме 10.1 А у Microsoft Edge всё хорошо.

Если браузер не поддерживает тени, они просто не отображаются и не влияют на макет.

Подсказки

Тени — это здорово, но если использовать их неправильно, можно испортить весь проект. Вот несколько советов, которые надо учитывать при стилизации теней:

• Лучше меньше. При наложении теней браузер выполняет больше работы. Для современных устройств это не проблема, но если делаете проект для аудитории с потенциально старыми устройствами или плохим интернетом, не перестарайтесь.
• Нужна логика. Не надо делать тени бессистемными. Предполагается, что у вас есть источники света, которые влияют на объекты на странице. Поэтому в расположении теней будет логика.
• Без анимации. Если анимировать box-shadow, производительность упадёт. Да и анимированные тени — это уже слишком.
• Используйте инструменты для наложения теней. Если лень писать много строк кода, а многослойных теней хочется, попробуйте shadows.brumm.af. Он добавляет к объекту до 10 слоёв box-shadow и экономит время, чтобы не вводить вручную несколько значений.