Как сделать тень вокруг блока css
Перейти к содержимому

Как сделать тень вокруг блока css

  • автор:

CSS тени и Неоморфный дизайн

CSS тени и Неоморфный дизайн

В этой статье мы рассмотрим, как добавить различные типы теней к блочным элементам и тексту.

Box-shadow — Тень для блочного элемента

Свойство box-shadow добавляет эффект тени вокруг элемента. При этом тень описывается смещениями по X и Y относительно элемента, радиусами размытия и распространения, а также цветом.

Если для элемента с тенью задано свойство border-radius , то у тени такого элемента будут такие же закругленные углы.

Свойство box-shadow может принимать несколько значений:

CSS box-shadow

  • : (обязательно) задает смещение по горизонтали; отрицательное значение помещают тень слева от элемента, положительное значение помещают тень справа от элемента
  • : (обязательно) задает смещение по вертикали; отрицательное значение помещают тень над элементом; положительное значение помещают тень под элементом
  • inset: наличие этого ключевого слова отбрасывает тень внутри элемента (создавая эффект вдавленности блока). Тень отображается внутри рамки, над фоном, но под содержимым элемента (например, box-shadow: 5px 10px inset; )
  • : чем больше это значение, тем больше размытие; отрицательные значения недопустимы (например, box-shadow: 10px 10px 8px #888; ). Если значение не указано, оно будет установлено равным 0, а края тени будут четкими
  • : положительные значения приведут к расширению тени и ее увеличению, отрицательные значения приведут к уменьшению тени (например, box-shadow: 10px 10px 8px 10px #888; ). Если значение не указано, оно будет равно 0, и тень будет того же размера, что и элемент
  • : определяет цвет тени
  • none: значение по умолчанию; тень не отображается

В одном свойстве box-shadow можно определить 2-4 значения , и inset:

  • Если задано только 2 значения, то они интерпретируются как и
  • Если есть еще 3-тье значение, то оно интерпретируются как
  • Если есть еще 4-тое значение, то оно интерпретируются как

Чтобы определить несколько теней, задайте список их значений через запятую (каждая из которых должна иметь большие значения смещения, чем предыдущие), например:

 box-shadow: 5px 5px #888, 10px 10px #7eb4e2, 15px 15px #f69ec4; 

Элемент с несколькими тенями

Односторонняя тень

Одностороннюю тень можно создать, задав значение или равным 0 и установив отрицательный .

 box-shadow: 0 10px 5px -5px #888; 

Элемент с односторонней тенью

Односторонняя тень во всю ширину

Чтобы создать одностороннюю тень длиной, равной ширине элемента, установите значение равным 0 и отрицательное значение :

 box-shadow: 0 -16px 12px 12px #000; 

Это будет работать только для панели навигации, которая прилегает вверху, слева и справа от страницы. При применении к ничем не окруженному элементу этот вид тени будет выглядеть как трехсторонняя тень.

Элемент с односторонней тенью во всю ширину

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

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

 box-shadow: 10px 0 10px -10px #666, -10px 0 10px -10px #666; 

Элемент с тенью у противоположных сторон

Нестандартные тени

Вот (слегка измененные) примеры создания нестандартных теней из книги Леа Веру «Секреты CSS». В приведенных ниже примерах тени создаются с помощью свойства filter , а не box-shadow .

Элементы с необычной тенью

 div < position: relative; display: inline-flex; flex-direction: column; justify-content: center; vertical-align: bottom; width: 5.9em; height: 5.2em; margin: .6em; background: #7eb4e2; filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5)); font: 200%/1.6 'Amatic SC', cursive; font-weight: 700; text-align: center; >.speech < border-radius: .3em; >.speech::before < content: ''; position: absolute; top: 1em; right: -.7em; width: 0; height: 0; border: 1em solid transparent; border-left-color: #7eb4e2; border-right-width: 0; >.dotted < background: transparent; border: .3em dotted #7eb4e2; >.cutout < border: .5em solid #7eb4e2; border-image: 1 url('data:image/svg+xml,\ \ \ '); background-clip: padding-box; > 

Text-shadow — Тень для текста

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

Каждая тень применяется как к самому тексту, так и к свойству text-decoration , если таковое имеется. Вы можете задавать несколько теней одновременно, разделяя их запятыми. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда располагается над остальными тенями.

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

 text-shadow: x-offset | y-offset | blur | цвет 
  • x-offset: (обязательно) задает смещение по горизонтали; отрицательное значение помещают тень слева от элемента, положительное значение помещают тень справа от элемента
  • y-offset: (обязательно) задает смещение по вертикали; отрицательное значение помещают тень над элементом; положительное значение помещают тень под элементом
  • blur: определяет радиус размытия; чем больше это значение, тем больше размытие; отрицательные значения недопустимы, если значение не указано, оно будет установлено равным 0, а края тени будут четкими
  • цвет: определяет цвет тени

Текст с тенью

 color: #fff; text-shadow: 1px 1px #32557f, 1px -1px #32557f, -1px 1px #32557f, -1px -1px #32557f, 3px 3px 6px rgba(0,0,0,.5); 

Неоморфизм / Soft UI

CSS тени активно используются в неоморфном дизайне.

Неоморфизм, также известный как мягкий дизайн пользовательского интерфейса (Soft UI), — это направление дизайна, которое подразумевает создание 3D-подобных обтекаемых или мягких фигур с помощью свойства box-shadow .

Нейморфному дизайну присущи следующие особенности:

  • Цвета обычно представляют собой светлые оттенки серого или близкие к белому. Однако вы можете использовать любой цвет, который вам нравится, и это все равно будет неоморфный дизайн.
  • Фон обычно того же цвета (или очень похожего), что и элементы, которые выглядят так, как будто они связаны с фоном.
  • Углы обычно закруглены.
  • Тени. Элементы имеют две тени — одна обычно темная, а другая белая.
  • Границы обычно отсутствуют. Однако элементы могут иметь необязательную тонкую границу, чтобы сделать края немного более четкими и улучшить контраст.

Вот типичный пример:

Пример неоморфного интерфейса

Сначала, мы удаляем границы и контур, а также задаем новые общие CSS правила для элементов ввода и для кнопок:

 $border_radius: 15px; $bgr-main: #eee; input, .btn

Затем, мы добавляем box-shadow к элементам: тень будет делать элементы визуально полыми или вдавленными, или будет делать элементы выпуклыми:

 /* Элемент будет вдавленным */ .inset < box-shadow: inset -4px -4px 10px #fff, inset 4px 2px 12px #b9bbc4; >/* Элемент будет выпуклым */ .outset

Также, чтобы улучшить контраст при наведении курсора мыши, мы слегка изменим тень кнопки входа в систему:

 .login-btn:hover

See the Pen Neumorphism / Soft UI by Shark on CodePen.

Вы также можете создать свой собственный нейморфный дизайн с помощью онлайн-инструментов, например, Neumorphism.io.

CSS свойство box-shadow

Свойство box-shadow дает возможность добавить одну или несколько теней к блоку, устанавливая следующие значения-color, size, blur, offset и inset. Можно указать параметры через запятую.

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

Есть две значения для установления тени offset. H-offset указывает на горизонтальное расстояние. Положительные значения смещают тень вправо от элемента. Отрицательные значения смещают тень влево от элемента. V-offset указывает на вертикальное расстояние. Положительное значение смещает тень вниз, а отрицательное значение — вверх. Если обе значения равны 0, то тень располагается за элементом.

Третье значение — blur. Чем больше радиус, тем больше размыта тень. Таким образом, тень становится больше и ярче. Отрицательные значения недопустимы. При значении 0 тень будет резкой.

Четвертое значение — inset. Оно добавляет внутреннюю тень к элементу. Если оно является значением по умолчанию, предполагается, что будет эффект падающей тени.

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

Шестое значение — color. Оно добавляет цвет к тени. Если значение 0, цвет будет зависеть от браузера.

При свойстве box-shadow необходимо использовать префиксы -moz- и -webkit- для Mozilla и Webkit.

Значение по умолчанию none
Применяется Ко всем элементам, а также к ::first-letter .
Наследуется Нет
Анимируемое Да. Тень блока анимируема.
Версия CSS3
DOM синтаксис object.style.boxShadow = «15px 25px 35px gray»;

Синтаксис

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

Теперь попробуем добавить тени к элементу.

Пример

html> html> head> style> div < width: 150px; height: 50px; background-color: #eee; box-shadow: 5px 4px 10px #1c87c9; -moz-box-shadow: 5px 4px 10px #1c87c9; -webkit-box-shadow: 5px 4px 10px #1c87c9; > style> head> body> h2>Пример box-shadow h2> div> div> body> html>

Добавим несколько теней к блоку:

Пример

html> html> head> style> div < width: 50%; height: 100px; border: 1px solid; padding: 10px; box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42; > style> head> body> h2>Несколько теней с box-shadow. h2> div> div> body> html>

Добавим значение inset к элементу. Оно добавляет тень внутри блока:

Пример

html> html> head> style> div < width: 150px; height: 50px; background-color: #eee; box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black; -moz-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black; -webkit-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black; > style> head> body> h2>Свойство box-shadow со значением inset. h2> div> div> body> html>

Значения

Значение Описание
none Указывает на отсутствие тени.
h-offset Необходимое значение. Горизонтальное смещение тени. Положительные значения смещают тень вправо от блока. Отрицательные значения смещают тень влево от блока.
v-offset Необходимое значение. Вертикальное смещение тени. Положительное значение смещает тень вниз, а отрицательное значение — вверх.
blur Необязательное значение. Тень размыта. Чем больше радиус, тем больше размыта тень.
spread Необязательное значение. Положительные значения увеличивают размер тени, а отрицательные уменьшают.
inset Необязательное значение. Внешняя тень становится внутренней.
color Необязательное значение. Указывает на цвет тени.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

4.0+ 12.0+ 3.5+ 5.0+ 11.5+

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 и экономит время, чтобы не вводить вручную несколько значений.

Добавить тень на криволинейную фигуру

введите сюда описание изображения

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

Отслеживать

110k 23 23 золотых знака 114 114 серебряных знаков 382 382 бронзовых знака

задан 9 апр 2019 в 8:47

Игорь Борисович Игорь Борисович

11 2 2 бронзовых знака

Почему бы не нарисовать эту тень в фотошопе вместо CSS?

9 апр 2019 в 8:51

а белый с синим объединить(2 слоя как один «двуцветный» с этим самым переходом) возможно в фотошопе и воспроизвести в css без ущерба для остальных эементов

9 апр 2019 в 15:50

Что-то я не понял комментария. Сделать два слоя в фотошопе (белый с прозрачной тенью и синий), сохранить две картинки и потом в html+css наложить их друг на друга вроде никто не мешает

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *