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

Эффект тени 2

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

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Эффект тени 6

Здесь эффект изогнутых теней на дне блока.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Описание свойства

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

1. none. Убирает добавленную тень.
2. inset. Реализует тень внутри блока в CSS.
3. Сдвиг по оси X и Y. Позволяет сместить тень по горизонтали и вертикали относительно объекта соответственно. Оба эти параметра указывать обязательно.
4. Радиус размытия. Если его не указать, тень будет, но четкая. А чем больше это значение, тем она больше, мягче и светлее.
5. Растяжение. Регулирует, будет тень больше элемента или меньше. Для этого нужно установить положительное и отрицательное значение соответственно. Если не указать, величина тени будет совпадать с размерами элемента.
6. Цвет. Если не указан, тень будет черной.

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

box-shadow: none | <тень> *

где :

inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Например, чтобы сделать тень блока с одной стороны по горизонтали, необходимо задать сдвиг по оси x, а чтобы отобразить ее внизу – по оси y.

Использование теней для изображений

Заключительный пример этой статьи будет посвящен использованию теней для изображений

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

Работу с фоновыми изображениями мы подробно рассмотрим в статье учебника «Работа с фоном элемента в CSS», а сейчас, чтобы поставить точку в изучении использования теней, поверхностно её затронем, и используем изображение в качестве фона к элементу в следующем примере:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования теней для изображений в CSS</title>
<style> 
div {
display: inline-block;  /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 237px; /* устанавливаем ширину блока (под размер изображения на этом этапе обучения) */
height: 212px;  /* устанавливаем высоту блока (под размер изображения на этом этапе обучения) */
margin: 2em; /* устанавливаем внешний отступ со всех сторон элемента */
}
.test {
background-image: url(grumpy.jpg);  /* задаем фоновое изображение для элемента */
box-shadow: inset 0 0 50px 10px violet;  /* устанавливаем внутреннюю тень для элемента(inset) без смещения с размытием 50px и размером 10px красного цвета */
}
.test2 {
background-image: url(grumpy.jpg);  /* задаем фоновое изображение для элемента */
box-shadow: 0 0 50px 10px rgba(255,0,255,.7); /* устанавливаем внешнюю тень для элемента без смещения с размытием 50px и размером 10px зеленого(лесного) цвета */
} 
</style>
</head>
	<body>
		<div class = "test"></div>
		<div class = "test2"></div>
	</body>
</html>

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

• Два блока фиксированной ширины и высоты (237px и 232px), добавили внешние отступы для всех сторон (2em) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку. Размер блока 237px на 232px мы установили под размер изображения, чтобы на данном этапе обучения не приходилось масштабировать изображение под элемент и затрагивать те свойства CSS, которые планируются к изучению на более позднем этапе (в статье учебника «Работа с фоном элемента в CSS»).
• Для первого блока с классом .test мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px. Цвет тени указали предопределенным цветом (violet). Кроме того мы указали в объявлении ключевое слово inset, благодаря чему тень падает внутрь элемента. Другими словами мы создали внутреннюю тень элемента.
• Для второго блока с классом .test2 мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px. Цвет тени указан в режиме RGBA.

Реэультат нашего примера:

Рис. 98 Пример использования теней для изображений в CSS (свойство box-shadow)

Пример использования

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент <p>):

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-shadow в CSS</title>
<style> 
p {
color: #fff; /* устанавливаем цвет текста белый*/	
text-shadow: 1px 1px 4px #000; /* размещаем текстовую тень*/	
} 
p::selection { /* описание псевдоэлемента, который позволяет стилизовать выделенный пользователем текст */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: 1px 1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
p::-moz-selection { /* описание псевдоэлемента для браузера Firefox (дублируем стили) */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: -1px -1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
</style>
</head>
	<body>
		<p>Текст с добавленной тенью.</p>
		<p>Текст с добавленной тенью.</p>
	</body>
</html>

В этом примере мы для всех азацев (элемент <p>) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.

Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным 4 пикселям.

Результат нашего примера:

Рис. 68 Пример использования свойства text-shadow (текстовая тень).

Множественная текстовая тень

Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Пример блока объявлений для множественной тени:

.multipleShadow {
text-shadow: -2px 3px 1px #777, 1px 2px 3px red; /* добавляем множественную тень */	
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример создания множественной текстовой тени</title>
<style> 
.test {
text-align: center; /* устанавливаем горизонтальное выравнивание текста по центру */
line-height: 150px; /* задаем высоту строки */
text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red; /* используем 8 теней в одном объявлении */
} 
.test2 {
text-shadow: 6px 6px 2px rgba(255, 0, 0, 0.5); /* устанавливаем тень смещенную вправо */
} 
.test3 {
text-shadow: -6px 6px 2px rgba(0, 255, 0, 0.5); /* устанавливаем тень смещенную влево */
} 
.test4 {
text-shadow: 0px 0px 6px rgba(0, 0, 255, 0.5); /* используем только радиус размытия, получая неоновый эффект */
} 
</style>
</head>
	<body>
		<div class = "test">Радужный текст</div>
		<div class = "test2">Текст с добавленной тенью</div>
		<div class = "test3">Текст с добавленной тенью</div>
		<div class = "test4">Текст с добавленной тенью</div>
	</body>
</html>

В данном примере мы применили множественную тень (8 теней) к первому элементу, установили для него высоту строки 150px (свойство line-height) и задали горизонтальное выравнивание по центру (свойство text-align со значением center). Для следующих блоков указали как положительное значение для горизонтальной тени, так и отрицательное, благодаря чему тень смещается в левую, а не правую сторону.

Для последнего блока мы установили радиус размытия 6px, а значения горизонтальной и вертикальной тени указали 0px, что придает некий неоновый эффект.

Рис. 68а Пример создания множественной текстовой тени.CSS свойства

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

Используя полученные знания составьте следующие блоки с различными эффектами тени на странице:
Практическое задание № 25.Подсказка: Обращаю Ваше внимание, что задачи 4, 5 и 6 считаются продвинутыми и расположены по мере нарастания сложности. Для их выполнения необходимо использовать множественные тени (две для четвертой задачи, четыре для пятой и три для шестой).. Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован

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

Границы элемента в CSS

Размеры блочных элементов в CSS

×

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Property Values

Tip: Read more about allowed values (CSS length units)

Эффект тени 5

В данном случае тень с двух сторон сильнее сдвинулась вниз.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

CSS тень с помощью изображений

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

Делаем заготовки для тени.

Обратите внимание, что кусочек правого нижнего угла (rb) при вырезании захватит часть самого блока. Поэтому после вырезания мы удаляем внутреннюю часть и делаем ее прозрачной (это позволяет формат PNG)

Пример HTML и CSS: тени с использованием изображений

Описание примера

По правилам HTML, если элементы вложены друг в друга, то те, которые находятся внутри, будут располагаться поверх тех, которые находятся снаружи. Это же относится и к фону элементов.
Для самых внешних блоков нашего примера («rc» и «cb») указываем фон с помощью свойства CSS background. Причем у «rc» позиционируем фон к правой стороне блока и разрешаем ему размножение только по вертикали, а у «cb» — к нижней стороне с размножением только по горизонтали. В итоге получаем две полоски тени, которые находятся справа и снизу от контента. Но по углам эта тень выглядит совсем не так, как нам надо, особенно в правом нижнем углу, где полоски накладываются друг на дружку. Идем дальше.
Внутрь внешних блоков помещаем еще три («lb», «rb» и «rt»), каждому из которых фоном задаем по одному уголку тени. Позиционируем фоновые изображения в нужные углы блоков и запрещаем им размножение (no-repeat). В результате эти фоновые кусочки частично накрыли в нужных нам местах фоновые полоски, которые были созданы ранее. Все, вот теперь тень готова.
По умолчанию блоки растягиваются во всю ширину родителя, поэтому для ее регулировки будем использовать самый внешний элемент («cb»), применив к нему свойство CSS width с нужным значением. У него же указываем фоновый цвет (если указать цвет фона у другого блока, то он перекроет часть тени).
Высоту (если нужно) и внутренние отступы наоборот задаем самому внутреннему элементу («rt»)

Особенно здесь важно указать нижний и правый отступ, чтобы контент не наложился на тень.
Чтобы в IE6 и IE7 все отображалось, как положено, прописываем для них свойство zoom:1. Свойство отсутствует в спецификации CSS.

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

Создание эффектов при наведении на картинки при помощи тени

Для этого воспользуемся псевдосклассом hover, который позволит нам задать тень для картинки при наведении указателя мышки. Так же, для того, что бы тень появлялась более плавно, воспользуемся CSS-свойством transition.

PHP

.shadow-4:hover {
box-shadow:0 0 6px 6px #555;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

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

PHP

.shadow-4 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

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

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

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

PHP

.shadow-3:hover {
box-shadow: 0 0 0 1px #ccc,
0 -20px 10px -5px #6BFA76,
20px 0 10px -5px #FBC16A,
0 20px 10px -5px #F4F171,
-20px 0 10px -5px #6BA5FA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

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

Шаг 2. Отбрасывание тени

Следующий шаг для CSS — смещение тени, которое создает эффект ее отбрасывания.
Проще не бывает. Все что требуется — это добавить свойство padding,
которое устанавливает поля справа и снизу для самого нижнего слоя. Когда padding
применяется к тегу <div>, то он изменяет размеры
объекта, и остальные два слоя изменяются вместе с ним. Как результат, все
три компонента тени, расположенные по правой и нижней стороне этих слоев,
смещаются одновременно. Теперь их можно увидеть через пустой промежуток, созданный
с помощью свойства
padding (пример 6).

Пример 6. Использование полей для отбрасывания тени

Результат данного примера продемонстрирован на рис. 5.

Рис. 5. Использование смещения содержимого

Модификация смещения

Изменение величины смещения тени делается почти также просто, как и замена
значений свойства padding для слоя wrap3.
Мы говорим «почти», поскольку настройка значения padding
просто перемещает тень, в то время как уголки продолжают прижиматься к краям
контейнеров. Чтобы точно смоделировать смещение тени, для обоих уголков следует
использовать свойство background-position.

Некоторые разработчики сказали бы, что достаточно настроить значение padding
и остановиться на этом

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

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

Судите сами. Рис. 6 используется ниже для демонстрации двух видов тени.

Рис. 6. Исходное изображение для создания тени

Все образцы в обоих наборах используют одинаковое значение свойства background-image.
Иными словами, одни и те же графические изображения применяются к каждому образцу.
Различается только степень смещения тени.

В наборе 1 сдвиг тени регулируется только значением свойства padding
для слоя wrap3, при этом перемещается только сама
тень без уголков. В наборе 2 значения padding и
background-position изменяются таким образом,
чтобы одновременно смещалась тень и ее уголки.

Если вы замечаете различия между приведенными наборами и предпочитаете второй
вариант, то к стилю уголков следует прибавить свойство background-position
и настроить его значение таким образом, чтобы компенсировать влияние
padding. Далее к изображению уголков с внешней
стороны следует добавить пустое белое пространство. Это позволяет рисунку перемещаться
на достаточно большое расстояние от границы слоя, без того, чтобы не терять
способность маскировать край тени. Каждый вид тени немного отличается от другого,
и как только вы начнете экспериментировать со смещением, то сразу станет понятно,
на какую величину следует увеличить белое пространство у картинки с уголками.

Property Values

Шаг 1. Отображение тени

Основная идея состоит в том, чтобы сопоставить каждый из трех компонентов
изображения тени своему контейнеру <div> через
соответствующий класс. Цель применения трех изображений состоит в том, чтобы
использовать два маленьких рисунка для маскирования среза края тени и создания
плавного закругления краев. Для этого один рисунок помещается в правый верхний
угол тени от объекта, а второй — в левый нижний.

Чтобы один рисунок находился поверх другого и маскировал его, необходимо изменить
его положение с помощью стилевого свойства z-index.
На самом деле волноваться по этому поводу не стоит, т.к. вложенная структура
тегов <div> работает на нас и позволяет автоматически
получить нужный порядок. Мы просто назначаем класс с тенью самому нижнему
тегу
<div> в наборе слоев. Поскольку нижние теги <div>
будут располагаться наверху, то им присвоим классы, которые отображают уголки
тени (пример 2).

Пример 2. Стили для отображения рисунков с тенью

Когда мы назначаем требуемый рисунок к нужному классу, следует установить для
него позиционирование с помощью свойства background-position.
Если мы оставим его значение по умолчанию, то все, что мы увидим — это
повторяющийся рисунок corner_tr.gif, поскольку
слой с ним находится наверху набора слоев. Помните, техника «луковой шелухи»
требует прозрачности верхних слоев, чтобы мы могли бы увидеть то, что находится
ниже них. Для этого следует отменить повторение фонового рисунка с помощью значения
no-repeat и позиционировать рисунок в нужном месте
композиции.

Здравый смысл говорит нам, что изображение с именем corner_tr.gif
должно находиться в правом верхнем углу, в то время как corner_bl.gif — в левом нижнем. Но что касается основного рисунка с тенью (shadow.gif),
надо ли позиционировать и его? Факт — надо. Если мы хотим, чтобы тень
отбрасывалась правее и ниже любого объекта, то следует определить ее положение
в классе wrap1. В противном случае рисунок заполнит
элемент <div> относительно его верхнего левого угла,
т.е. совсем не там, где он требуется.

Основной слой — DIV.wrap1

Внешний <div> содержит самый большой из трех
компонентов тени (файл shadow.gif), который позиционирован
по правому и нижнему краю (пример 3).

Пример 3. Стиль для основного слоя

На рис. 2 показано содержимое слоя и требуемый графический файл.

Рис. 2. Содержимое слоя wrap1

Средний слой — DIV.wrap2

Второй <div>, вложенный внутри первого, маскирует
срез левого нижнего края тени и устанавливает плавное закругление (пример 4).

Пример 4. Стиль для среднего слоя

На рис. 3 показано содержимое слоя и требуемый графический файл.

Рис. 3. Содержимое слоя wrap2

Внутренний слой — DIV.wrap3

Третий <div>, вложенный внутри второго, занимается срезом
верхнего правого края тени.

Пример 5. Стиль для внутреннего слоя

На рис. 4 показано содержимое слоя и требуемый графический файл.

Рис. 4. Содержимое слоя wrap3

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