Тень блока css: box-shadow | htmlbook.ru

Тень блока (свойство box-shadow) | CSS — Примеры

box-shadow generator

Свойство box-shadow (w3.org) создаёт элементу тень.

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

цвет одной стороны

цвет другой стороны

толщина тени

<div></div>

Эффект тени блока

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

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

Снизу (под блоком div)

По бокам (справа и слева)

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css. yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

Понадобится статья «Как убрать отступ под изображением»

<span><img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg"/></span>

box-shadow и HTML тег input

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

<input type="text" placeholder="псевдоним или email"/>
<input type="password" placeholder="пароль">

Или подсветка внутри input (получилась красивая форма входа CSS):

<input type="text" placeholder="псевдоним или email"/>
<input type="password" placeholder="пароль">

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

? нет да

<span>да</span>
<span>нет</span>
<span>да</span>

Продолжение следует: box-shadow и :before и :after.

box-shadow — тень блока (внешняя и внутренняя)

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

12.0+	9.0+	4.0+	10.0+	10.5+	5.1+

Описание

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

Для каждой тени можно задать от 2 до 6 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую:

div {
  width: 300px;
  height: 200px;
  margin: 100px;
  background-color: silver;
  box-shadow: 0 0 10px 5px black,
              40px -30px 15px lime,
			  40px 30px 50px red,
			 -40px 30px 15px yellow,
			 -40px -30px 50px blue;
}

Попробовать »

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Значение по умолчанию:	none
Применяется:	ко всем элементам
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.boxShadow=»10px 10px 5px #888888″

Синтаксис

box-shadow: none|смещение-х смещение-у размытие размер цвет [inset]|inherit;

Значения свойства

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

Значение	Описание
смещение-x и смещение-y	Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры)
размытие	Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)
размер тени	Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)
цвет	Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.
inset	Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)
none	Указывает на отсутствие тени.

Пример

div#myDIV {
background-color: yellow;
width: 200px;
height: 100px;
box-shadow: 10px 10px black;
}

Коллекция css теней Box-shadows.css / Хабр

Привет всем!

Наверняка, некоторые из вас замечали, что на разных сайтах используются практически однотипные тени в блоках, панелях навигации и прочих контейнерах, плюс — минус пара пикселей в сторону прозрачности. Я проанализировал ряд популярных сайтов, как наших, так и зарубежных, и попытался собрать максимально приближенные параметры используемых теней в одну большую коллекцию, или библиотеку. Кому как удобнее. Надеюсь, кому-нибудь пригодится.

Основная цель проекта — облегчить работу начинающим веб-дизайнерам и разработчикам в создании приятного и современного дизайна. Возможно и опытные дизайнеры почерпнут для себя что-нибудь интересное из этой разработки.

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

Box-shadows.css

Box-shadows.css — это коллекция простых и приятных css теней (box-shadow) для ваших проектов. В роли основного используется простой класс .bShadow. Сейчас коллекция насчитывает более 50 актуальных вариантов теней с номером, а так же три самостоятельных класса .bShadow, .bShadow-light и .bShadow-inset. Они отлично подходят для использования в таблицах, для содержимого домашних страниц, контейнеров, навигации и других блоков вашего сайта.

Пресекая ряд вопросов, сразу поясню, почему используются числа, а не имена или классы типа bShadow-01040-00.
Коллекция не использует самостоятельные имена, как это сделано в animate.

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

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

Дополнительные функции

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

Подбор теней

На сайте предусмотрена функция предварительного просмотра, в которой можно указать цвет фона и контейнера вашего сайта, для дальнейшего подбора теней. Подбор теней и классов осуществляется посредством выбора опций или наведением на блоки. Результат отображается в виде тени основного контейнера сайта.

Генератор файлов min.css

На сайте также есть генератор файла box-shadows.min.css с инструкцией, который позволяет пользователю создавать собственный файл, состоящий только из выбранных им классов. Это поможет уменьшить нагрузку на сайт, если в вашем проекте используется менее двух или трех теней.

Генератор css box-shadow

Вы можете использовать классический генератор css box-shadow, чтобы дополнить коллекцию своими собственными стилями. Нажав кнопку «Сохранить и добавить следующий», вы можете создавать бесконечное количество классов. Первому сгенерированному и последующим классам присваивается порядковый номер, не входящий в коллекцию. Вы можете скопировать полученные стили и вставить в корневой css или созданный на сайте файл box-shadows.min.css.

Попробуйте поэкспериментировать. Это действительно интересная работа.
Сейчас разработка находится на стадии развития и набора 200 звезд на GitHub, для получения ссылки на cdnjs. Желаю вам приятного пользования и творческих успехов. Если у вас есть пожелания, замечания или предложения по улучшению проекта, пишите в комментариях.

GitHub · Сайт

Свойство box-shadow — тень блока

Свойство box-shadow задает тень блоку. В качестве значения свойство принимает 6 параметров, перечисляемые через пробел, либо ключевое слово none, отменяющее тень совсем.

Синтаксис

селектор { box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет; }

селектор { box-shadow: none; }

Параметры

Параметр	Описание
inset	Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан — то снаружи.
сдвиг по x	Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево.
сдвиг по y	Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх.
размытие	Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой.
размер тени	Задает размер тени. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан — тень будет такого же размера, что и элемент.
цвет	Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Смещения по осям, размытие и размер тени задаются в любых единицах для размеров, кроме процентов.

Пример

В данном примере тень сдвинута вниз и влево и добавлено небольшое размытие:

<div></div> #elem { box-shadow: 5px 5px 3px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример .

Четкая тень

В данном примере тень сдвинута вниз и влево, но размытия нет (тень будет четкой):

<div></div> #elem { box-shadow: 2px 2px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример . Равномерная тень

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

<div></div> #elem { box-shadow: 0px 0px 3px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример . Размер тени

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

<div></div> #elem { box-shadow: 0 0 0 3px red; border: 3px solid black; width: 300px; height: 50px; }

:

Пример .

Размытие + размер тени

В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное — это граница, красное — это тень):

<div></div> #elem { box-shadow: 0 0 3px 3px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример . Внутренняя тень

В данном примере тень находится внутри контейнера:

<div></div> #elem { box-shadow: inset 0 0 6px black; border: 1px solid black; width: 300px; height: 50px; }

:

Смотрите также

• свойство text-shadow,
  которое задает тень тексту

Красивая тень блока (box-shadow) через CSS

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

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

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

1. Первый вариант. Рамка с красивой тенью box-shadow без смещений

Не сложный вариант, что выстроен на свойстве box-shadow на странице, где производит равномерное обтекание каркаса, что идет без смещений.

HTML

Код

<div>Вариант №1. Тень по сторонам</div>

CSS

Код

.koshadows_nalinedsup {
  padding: 15px;
  margin: 27px;
  width: 125px;
  height: 125px;
  box-shadow: 0px 0px 20px 4px #144d98;
  border-radius: 5px;
}

Снимок предоставлен выше, что по стилистике 20px будет выставлять равномерно по сторонам ширину.

2. Второй вариант. Создание рамки со смещенной тенью

Этат вариант почти аналогичен первому, тлко будет со смещенной рамкой.

HTML

Код

<div>Второй вариант №2. Смещенная тень.</div>

CSS

Код

.koshadows_nalinedsup_2 {
  padding: 7px;
  margin: 30px;
  width: 134px;
  height: 134px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px 3px #4b6dc5;
}

Здесь видно, как с верхнего левого угла идет смещение тени.

3. Третий вариант №3. Создать свечение каркаса или рамки

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

HTML

Код

<div>Третий вариант №3. Создать свечение.</div>

CSS

Код

.koshadows_nalinedsup_3 {
  padding: 7px;
  margin: 19px;
  width: 185px;
  height: 108px;
  box-shadow: 0px 0px 18px #253688;
  border-radius: 12px;
}

Закругление углов установливаем в самый низ, так как если ставить выше, будет пропадать рамка.

4. Четвертый вариант. Создать внутренне свечение границ

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

HTML

Код

<div>Четвертый вариант №4. Основное свечение внутри.</div>

CSS

Код

.koshadows_nalinedsup_4 {
  padding: 9px;
  margin: 15px;
  width: 195px;
  height: 117px;
  box-shadow: 0px 0px 19px #2c3a7b inset;
  border-radius: 8px;
}

Такой премер можно пременить при различном оформление элементов.

5. Пятый вариант. Здесь совмещаем цветовую палитру теней

Создадим совмешение теней разной гаммы цвета, которая происходит через запятую. Где получится интересный результать, вероятно самый яркий, плюс еще присутствует 3D формат.

HTML

Код

<div>Пятый вариант №5. Разброс цветовых теней.</div>

CSS

Код

.koshadows_nalinedsup_5 {
  padding: 9px;
  margin: 18px;
  width: 178px;
  height: 123px;
  box-shadow: 0px 0px 14px 2px #0dec0d inset, 4px 4px 9px #0e0eef, -4px -4px 9px #ea0909;
  border-radius: 4px;
}

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

Важно: старые браузеры

Браузер IE до 9 версии не будет поддерживать свойство box-shadow, а точнее просто его не видеть.

Префиксы браузеров под свойство box-shadow:

-webkit-box-shadow — Идет для браузеров Chrome только до 10 обновления, также Safari до 5.1 версий.

-moz-box-shadow — здесь воспроизводится для Firefox, где идет до 4.0 версии.

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

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

Детальный обзор CSS свойства box-shadow

От автора: CSS свойство box-shadow позволяет сделать так, чтобы у блочных элементов появилась внешняя или внутренняя тень. Давайте познакомимся поближе с этим CSS свойством.

 

Далее представлены три разных примера применения CSS свойства box-shadow к элементу div.

Пример 1: Простая внешняя тень

Вот так вы можете задать для элемента div легкую серую внешнюю тень:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

box-shadow: 0 0 10px gray;

box-shadow: 0 0 10px gray;

Пример 2: Внутренняя тень

Внутренняя тень может быть задана с использованием значения inset.

box-shadow: inset 0 0 10px;

box-shadow: inset 0 0 10px;

Пример 3: Смешение внешней тени

В этом примере тень отбрасывается с наклоном от нижней правой части блока благодаря использованию горизонтального и вертикального смещения на 5px.

box-shadow: 5px 5px 10px;

box-shadow: 5px 5px 10px;

А что если вы хотите, чтобы тень отбрасывалась от верхней левой части блока? Это можно осуществить, используя отрицательные значения для горизонтального и вертикального смещения. В следующем примере горизонтальное и вертикальное смещение равно -5px.

box-shadow: -5px -5px 10px;

box-shadow: -5px -5px 10px;

Теперь, когда вы увидели несколько «живых» примеров использования CSS свойства box-shadow, давайте пойдем дальше.

Синтаксис

Общий синтаксис для свойства box-shadow выглядит так:

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

Значения CSS свойства box-shadow

CSS свойство box-shadow может иметь шесть возможных значений:

inset – отображение тени внутри элемента

horizontal offset – горизонтальное смещение

vertical offset – вертикальное смещение

blur radius – радиус размытия

spread distance – растяжение (толщина тени)

color – цвет

И только два значения являются обязательными: горизонтальное и вертикальное смещение.

Для четырех значений (горизонтальное смещение, вертикальное смещение, радиус размытия и растяжение) должны использоваться CSS единицы измерения (например, px, em, % и т.д.).

Цвет должен быть представлен в виде допустимого в CSS значения для определения цвета, например, шестнадцатеричного значения (#000000).

Описание значений свойства box-shadow

Inset

Если ключевое слово inset указано, тень будет отображаться внутри HTML элемента.

box-shadow: inset 0 0 5px 5px olive;

box-shadow: inset 0 0 5px 5px olive;

Для сравнения приведем тот же пример без указания inset:

box-shadow: 0 0 5px 5px olive;

box-shadow: 0 0 5px 5px olive;

Горизонтальное смещение

Значение горизонтального смещения отвечает за позицию тени по оси X. Положительное значение будет смещать тень вправо, а отрицательное – влево.

В следующем примере горизонтальное смещение равно 20px, т.е. в два раза больше, чем вертикальное смещение, которое равно 10px, поэтому по горизонтали тень будет в два раза шире.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вертикальное смещение

Значение вертикального смещения отвечает за позицию тени по оси Y. Положительное значение будет смещать тень вниз, а отрицательное – вверх.

В следующем примере вертикальное смещение равно -20px, т.е. в два раза больше, чем горизонтальное смещение, которое равно 10px, поэтому размер тени в два раза больше по вертикали. Также, поскольку указано отрицательное значение, то и тень смещается от верхней части блока.

Радиус размытия

Значение радиуса размытия влияет на размытость/резкость тени.

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

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

В следующем примере радиус размытия равен 20px, поэтому эффект достаточно хорошо виден.

box-shadow: 5px 5px 20px;

box-shadow: 5px 5px 20px;

Растяжение (ширина)

Значение растяжения (ширины) увеличивает или уменьшает тень во всех направлениях. Если оно является положительным, тень будет увеличиваться со всех сторон. Если оно будет отрицательным, то наоборот тень будет уменьшаться.

Обратите внимание на то, что при положительном значении растяжения (10px), со всех сторон элемента появляется тень в 10px, при том, что горизонтальное и вертикальное смещение равно 0:

box-shadow: 0 0 10px 5px;

box-shadow: 0 0 10px 5px;

Когда значение растяжения является отрицательным, тень пропорционально уменьшается. В следующем примере тень меньше, чем ширина блока, потому что указано отрицательное значение растяжения, а горизонтальное смещение равно 0:

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

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

Цвет

Как вы уже могли догадаться по названию, значение цвета устанавливает цвет тени. Для него может использоваться любой допустимый в CSS формат представления цвета. Цвет является необязательным значением.

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

color: red; box-shadow: 0 0 10px 5px;

color: red; box-shadow: 0 0 10px 5px;

Если вы хотите, чтобы у тени был другой цвет, тогда вам нужно будет указать его при объявлении свойства box-shadow. В следующем примере видно, что несмотря на то, что значение цвета для элемента div по-прежнему равно red, цвет тени теперь равен blue.

color: red; box-shadow: 0 0 10px 5px blue;

color: red; box-shadow: 0 0 10px 5px blue;

Несколько теней

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

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

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

box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;

box-shadow: -5px -5px 30px 5px red,              5px 5px 30px 5px blue;

Браузерная поддержка

CSS свойство box-shadow имеет хорошую браузерную поддержку. Считая браузер Internet Explorer наименьшим общим знаменателем, данное свойство поддерживается этим браузером с 9 версии (выпущенной в 2011 году).

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

Автор: Jacob Gube

Источник: //sixrevisions.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Тень для текста, картинки, блока

Здравствуйте уважаемые начинающие веб-мастера

Продолжаем знакомство с Оригинальными эффектами CSS

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

А сейчас, я расскажу и покажу, как и какую тень можно сделать для блока, текста и изображения, при помощи средств CSS.

Для создания тени в CSS существуют два свойства:

1. box-shadow — создание тени для блоков;
2. text-shadow — создание тени для текстa

Записывается так:

box-shadow: 4px 4px;

text-shadow: 4px 4px;

Значений, определяющих форму тени, может быть больше двух, и ниже на примерах, мы это подробно разберём.

Раньше у этих свойств были проблемы с кросбраузерностью, и при их написании применялись префиксы. Однако в последних версиях браузеров Chrome 31.0.1650.63, Yandеx 13.1, Opera 12.15, Internet Explorer 11, Firefox 23.0, Safari 5.1.4, эти свойства работают без префиксов.

На всякий случай, если кто то пользуется браузерами более ранних версий, привожу список префиксов.

-moz-box-shadow — значение для Mozilla Firefox 3.6 + ;

-webkit-box-shadow — Safari, Chrome, iOS, Android 2.1-3.0 ;

-o-box-shadow — значение для Opera 11. 10 + ;

-ms-box-shadow — значение для IE10 + ;

Для text-shadow — аналогично.

Внешний вид тени (направление, цвет, размер, размывание), задается значениями. Рассмотрим их подробно, так как именно ими нам придётся оперировать, чтобы реализовать задуманный вид.

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
  .blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 4px 4px
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Для текста тень задаётся аналогично.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www. w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Как сделать тень CSS</title>
<style type="text/css">
  .blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 4px 4px;
}
  p{
padding: 40px 0 0 80px;
font-size: 24px;
text-shadow: 10px 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>Блок с тенью</p>
</div>
</body>
</html>

Следующим шагом зададим цвет для тени. Для этого нужно просто ввести в значение код цвета, причем можно использовать любой формат, от шестеричного до rgba (с прозрачностью)

box-shadow: -4px -4px #0ea8f4;
text-shadow: -10px -10px #94a7af;

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

box-shadow: 4px 4px 5px #0ea8f4;
text-shadow: 10px 10px 2px #94a7af;

По умолчанию, все браузеры отображают тень того же размера, что и объект её отбрасывающий. Можно её увеличить. Для этого в значения вводиться четвёртый параметр.

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

box-shadow: 0px 0px 0px 5px #0ea8f4;
border-radius: 10px;

К огромному сожалению, четвёртое значение для text-shadow, браузерами не поддерживается, поэтому растянуть тень для текста можно только при помощи сдвигов, и только в двух направлениях.

Делается это следующим образом: задаётся несколько значений теней, сдвиг у которых последовательно увеличивается на 1 пиксель. Каждая тень пишется через запятую.

text-shadow: 1px 1px #94a7af,
2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;

Можно сделать обводку текста тенью. В посте Анимация для шапки сайта у меня есть пример и набор теней необходимый для этого.

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

Можно изменить последовательность теней, от большей к меньшей, и в самой большой применить третье значение (размывание). Короче — простор для творчества.

Это же свойство — множество теней, отлично применяется к box-shadow, принимающего четвёртое значение (растяжение тени).

При помощи него можно сделать для блока очень красивую рамку. Например такую:

box-shadow: 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
border-radius:10px;

Тут тоже простор для творчества. Кстати, все приведённые выше стили, можно подключать встроенным способом, то есть прописывать их прямо в html тег, с помощью атрибута style.

Хотя делать это нужно очень ограничено, только в нестандартных ситуациях. А лучше всего все стили выносить в отдельный файл.

Дальше ещё интереснее, так как обратимся к таким средствам CSS3, как псевдоклассы.

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

Сначала применим псевдокласс :hover. Он изменяет цвет элемента, при наведении на него курсора.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 0px 0px 0px 5px #0ea8f4;
border-radius: 10px;
}
.blok:hover{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 0px 0px 0px 5px #f26522;
border-radius: 10px;
}
p{
padding: 40px 0 0 80px;
font-size: 24px;
text-shadow: 1px 1px #94a7af,
2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;
font-weight: bold;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

До наведения курсора:

 
При наведении курсора:
 

 
Далее обратимся к псевдоэлементам :before и :after, а так же свойству transform

При помощи псевдоэлементов :before и :after, можно добавить дополнительные стили до и после элемента.

Свойство transform, согласно своему названию, может вращать, сдвигать, наклонять и масштабировать элемент, а так же комбинировать эти действия.

Подробную информацию об этих средствах CSS, можно найти в интернете, у меня же практическое руководство, поэтому сразу перейдём к написанию кода.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok {
position: relative;
width: 30em; /*1em = font-size, в нашем случае - 20px*/
height: 10em;
padding: 0.5em; /*Сдвиг левой тени*/
background: #ffe5b4;
border-radius: 0.5em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.7);
/*Тень дублируется, для более чёткого отображения границы*/

}
.blok:before,
.blok:after {
content:""; /*обязательная строка, для правильного отображения псевдоэлементов*/
position: absolute;
z-index: -5;
bottom: 1em;
width: 90%; /*Ширина тени относительно блока*/
height: 20%;
box-shadow: 0 15px 7px rgba(0, 0, 0, 0. 7);
-webkit-transform: rotate(-3deg); /*поворот угла*/
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.blok:after {
right: 0.5em; /*Отступ тени от правого края*/
left: auto;
-webkit-transform: rotate(3deg); /*обратный поворот угла*/
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
p {
font-size: 20px;
font-weight: bold;
padding-left: 9em;
text-shadow: -0.4em -0.4em #94a7af;
margin: auto;
}
</style>
</head>
<body>
<div>
<p>Блок с тенью</p>
</div>
</body>
</html>

Результат:

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
. blok {
position: relative;
width: 30em;
height: 9em;
padding: 1em;
margin: 2em 0.5em 4em;
background: #ffe5b4;
box-shadow: 0 1px 5px #464451;

}

.blok:before,
.blok:after {
content: "";
position: absolute;
z-index: -2;

}

.blok:before {
top: 0px;
bottom: 0px;
left: 10px;
right: 10px;
box-shadow: 0px 1px 15px #464451;
border-radius: 120px / 15px;
}

p {
font-size: 20px;
font-weight: bold;
padding-left: 10em;
text-shadow: -0.4em -0.4em #94a7af;
margin: auto;
}

</style>
</head>
<body>
<div>
<p>Блок с тенью</p>
</div>
</body>
</html>

Результат:

Пока всё. Желаю творческих успехов.

Перемена

Две бывшие одесситки на Brighton Beach
— Фирочка! Вы слышали весь этот ужас?
— А какой именно?
— Ну, если выбрали Обаму, так значить придут негры и нас всех будут насиловать!
После долгой паузы…………
— Сима, во-первых, попритушите Ваши радостные глазки! Во-вторых, я
смотрю на вас и удивляюсь. Вы что, всему этому верите? Это же все их
предвыборные обещания!

Градиент CSS. Плавный переход от одного цвета к другому < < < В раздел > > > Прозрачные изображения и прозрачный текст CSS
 

box-shadow — CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.

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

Генератор блочной тени — это интерактивный инструмент, позволяющий генерировать блочную тень .

 
box-shadow: нет;


box-shadow: 60–16 пикселей бирюзовый;


box-shadow: 10px 5px 5px черный;


box-shadow: 2px 2px 2px 1px rgba (0, 0, 0, 0,2);


box-shadow: вставка 5em 1em золото;


box-shadow: 3px 3px красный, -1em 0 0,4em оливковый;


box-shadow: наследовать;
box-shadow: начальный;
box-shadow: не задано;
  

Укажите одну тень блока, используя:

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

Значения

вставка

Если не указано (по умолчанию), предполагается, что тень является падающей тенью (как если бы прямоугольник был поднят над содержимым).
Наличие ключевого слова inset изменяет тень на одну внутри кадра (как если бы содержимое было вдавлено внутри рамки). Вставные тени рисуются внутри границы (даже прозрачные) над фоном, но под содержимым.

<смещение-x> <смещение-y>

Это два значения для установки смещения тени. определяет горизонтальное расстояние. Отрицательные значения помещают тень слева от элемента. определяет расстояние по вертикали. Отрицательные значения помещают тень над элементом. См. <длина> для возможных единиц.
Если оба значения равны 0 , тень помещается за элементом (и может генерировать эффект размытия, если установлено и / или ).

<радиус размытия>

Это третье значение <длина> . Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее.Отрицательные значения не допускаются. Если не указано, это будет 0 (край тени резкий). В спецификации не содержится точного алгоритма расчета радиуса размытия, однако он уточняется следующим образом:

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

<радиус распространения>

Это четвертое значение <длина> . Положительные значения приведут к расширению и увеличению тени, отрицательные значения вызовут сжатие тени. Если не указано, это будет 0 (тень будет того же размера, что и элемент).

<цвет>

Возможные ключевые слова и обозначения см. В values.
Если не указано, по умолчанию используется .

Интерполяция

Каждая тень в списке (обработка none как список нулевой длины) интерполируется через компонент цвета (как цвет), а также x, y, размытие и (при необходимости) распространение (как длину) составные части. Для каждой тени, если обе входные тени являются или не являются , вставкой , то интерполированная тень должна соответствовать входным теням в этом отношении. Если любая пара входных теней имеет одну вставку , а другую — не вставку , весь список теней не интерполируется.Если списки теней имеют разную длину, то более короткий список дополняется в конце тенями, цвет которых равен , прозрачный , все длины — 0 , и чья вставка (или нет) соответствует более длинному списку.

  нет | <тень> # где <тень> = вставка? && <длина> {2,4} && <цвет>? где <цвет> =  |  |  |  |  | <имя-цвета> | текущий цвет | <цвет устаревшей системы>, где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |   

Установка трех теней

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

HTML

  
  Можешь застрелить меня своими словами, 

Можешь порезать меня глазами, 

Ты можешь убить меня своей ненавистью, 

Но все равно, как воздух, поднимусь. 
 & mdash; Майя Анжелу 
  

CSS

  blockquote {
  отступ: 20 пикселей;
  тень коробки:
       вставка 0 -3em 3em rgba (0,0,0,0.1),
             0 0 0 2px rgb (255,255,255),
             0.3em 0.3em 1em rgba (0,0,0,0.3);
}  

Результат

Установка нуля для смещения и размытия

Когда значения x-offset , y-offset и blur равны нулю, тень блока будет сплошным контуром равного размера со всех сторон. Тени отрисовываются задом наперед, поэтому первая тень располагается поверх последующих теней. Когда для border-radius установлено значение 0, по умолчанию, углы тени будут, ну, углами.Если бы мы поставили border-radius любого другого значения, углы были бы скруглены.

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

HTML

  
 
 Привет, мир 
 
  

CSS

  п {
  box-shadow: 0 0 0 2em # F4AAB9,
              0 0 0 4em # 66CCFF;
  маржа: 4em;
  отступ: 1em;
}  

Результат

таблицы BCD загружаются только в браузере

Box Shadow CSS Tutorial — How to Add Drop Shadow to Any HTML Element

Мы можем добавить тень к любому элементу HTML, используя свойство CSS box-shadow .Вот как.

Добавление базовой тени

Давайте сначала настроим некоторые базовые элементы HTML для добавления наших теней:

  
 Box1 
 Box2 
 Box3 
  

Затем добавьте базовый CSS:

  p {
    отступ: 10 пикселей;
}
. коробка {
    отступ: 20 пикселей;
    ширина: 50%;
    маржа: 30 пикселей автоматически;
    фон: # 000;
    цвет: #fff;
}  

В результате мы получим всего три черных ящика, в которые нам будет легко добавлять тени, вызывая их уникальный идентификатор:

Настройка элементов HTML

Чтобы добавить базовую тень, давайте воспользуемся свойством box-shadow в Блоке 1 :

  / * смещение-x | смещение-у | цвет */
# box1 {
    box-shadow: 6px 12px желтый;
}  

Добавление базовой тени к Box 1

У нас есть 3 параметра.Первые 2 — это, соответственно, смещение по оси x и смещение по оси y. Они задают расположение падающей тени.

Смещение относительно исходной точки, которая в HTML всегда является левым верхним углом элемента. Положительное смещение по оси x сдвинет тень вправо, а положительное смещение по оси Y переместит тень вниз.

Третий параметр — это цвет вашей тени.

Имейте в виду, что хотя здесь мы использовали