CSS свойство box-shadow - httpdoc.ru

CSS отбрасывающая тень

Тень css дает вам возможность добавлять эффекты тени к элементам, как в Photoshop. Это очень эффективный способ улучшить внешний вид элемента на веб-странице. До CSS3 нарезанные изображения использовались для создания теней вокруг элементов. Есть много способов создать тень css для различных типов элементов и текста.

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

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

Синтаксис
box-shadow: смещение-x, смещение-y, радиус размытия, цвет;

Компонент свойства Box Shadow css

Характеристики Описание
offset-x Устанавливает горизонтальное смещение тени.
offset-y Устанавливает вертикальное смещение тени.
радиус размытия Он устанавливает радиус размытия, размытая тень выглядит лучше, чем обычная тень. Чем больше значение, тем больше будут размыты края.
цвет Устанавливает цвет тени. По умолчанию, если цвет не указан, он принимает значение свойства цвета.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 Box Shadow Effect </title> 
  <meta charset="UTF-8">
<style>      
  .box{
    width: 200px;
	height: 150px;
	background: #2247b7cc;
	box-shadow: 5px 5px 10px #2247b7;
	}
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Выход

CSS3 Box Shadow Effect
Примечание. Если значение для компонента blur-radius не указано или установлено равным нулю (0), края тени будут резкими, это не будет выглядеть красиво по сравнению с размытыми тенями.

Тень окна с несколькими эффектами

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 Multiple Box Shadow Effect </title> 
  <meta charset="UTF-8">
<style>      
  .box{
   width: 200px;
   height: 150px;
   background: #2247b7cc;
   box-shadow: 5px 5px 10px #2247b7;
	}
   .box1{
    width: 200px;
	height: 150px;
	background: blueviolet;
	box-shadow: 10px 5px 5px red;
	 }
   .box2{
	width: 200px;
	height: 150px;
	background: orange;
	box-shadow: 60px -16px teal;
	 }
   .box3{
	width: 200px;
	height: 150px;
	background: gray;
	box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
	 }
</style>
</head>
<body>
    <div class="box"></div><br> <br> 
    <div class="box1"></div><br><br>
    <div class="box2"></div><br><br>
    <div class="box3"></div>
        </body>
</html>

Выход

CSS3 Multiple Box Shadow Effect







CSS3 свойство text-shadow

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 Text Shadow Effect </title> 
  <meta charset="UTF-8">
<style>      
  h1 {
   text-shadow: 5px 5px 10px #c81818bd;
	}
  h2 {
   text-shadow: 5px 5px 15px blue, 10px 10px 20px yellow;
	}
</style>
</head>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
</body>
</html>

Выход

CSS3 Text Shadow Effect

Это заголовок 1

Это заголовок 2