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

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

Синтаксис CSS box-shadow

...
box-shadow: X Y R1 R2 color [inset];
...

Где:

  • X – смещение по оси Х (горизонтали)
  • Y – смещение по оси У (вертикали)
  • R1 – размытие (чем больше значение, тем плавне переход)
  • R2 – радиус растяжения (если положительный, то растягивает, отрицательный – сжимает)
  • color – цвет (можно задавать в любом формате: #RGB, название цвета)
  • inset – при наличии этого значения тень будет располагаться внутри блока (элемента)

Пример 1. HTML рамка с тенью box-shadow без смещения

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

<html>
<head>
<style>
.primer1{
padding: 10px;
margin: 10px;
width: 200px;
height: 100px;
box-shadow: 0px 0px 15px 5px #a34b23;
}
</style>
</head>
<body>
<div class="primer1">Пример №1. Рамка с тенью</div>
</body>
</html>

На странице преобразуется в следующее

Пример №1. Рамка с тенью





Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

<html>
<head>
<style>
.primer2{
padding: 10px;
margin: 10px;
width: 200px;
height: 100px;
box-shadow: 1px 1px 2px 3px #a34b23;
}
</style>
</head>
<body>
<div class="primer2">Пример №2. Рамка со смещенной тенью</div>
</body>
</html>

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

<html>
<head>
<style>
.primer3{
padding: 10px;
margin: 10px;
width: 200px;
height: 100px;
box-shadow: 0px 0px 20px #b04b66;
}
</style>
</head>
<body>
<div class="primer3">Пример №3. Свечение</div>
</body>
</html>

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset.

<html>
<head>
<style>
.primer4{
padding: 10px;
margin: 10px;
width: 200px;
height: 100px;
box-shadow: 0px 0px 20px #b04b66 inset;
}
</style>
</head>
<body>
<div class="primer4">Пример №4. Внутреннее свечение</div>
</body>
</html>

На странице преобразуется в следующее

Пример №4. Внутреннее свечение






Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

<html>
<head>
<style>
.primer5{
padding: 10px;
margin: 10px;
width: 200px;
height: 100px;
box-shadow: 0px 0px 15px 3px #0f0 inset,
5px 5px 10px #00f,
-5px -5px 10px #f00;
}
</style>
</head>
<body>
<div class="primer5">Пример №5. Совмещение теней</div>
</body>
</html>

На странице преобразуется в следующее

Пример №5. Совмещение теней

Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

  • -webkit-box-shadow – для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
  • -moz-box-shadow – для Firefox до версии 4.0




Читайте также:

• Как сделать треугольник через CSS

• Свойство display

• Свойство text-shadow

• Свойство transform

• Свойство transform-origin

• Свойство border

• Свойство background

• Свойство transition

• Свойство nth-child

• font-weight

• Свойство overflow

• Свойство position relative

• Вендорные префиксы CSS


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.