CSS свойство box-shadow
Сегодня я предлагаю для изучения очередное CSS свойство box-shadow, при его помощи Вы сможете задавать тень для нужного элемента и сделать это можно всего лишь одной строкой CSS кода. Приступим к рассмотрению данного свойства.
<html>
<head>
<title>Использование тени</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>
Блок с тенью
</div>
</body>
</html>
Применяем CSS код, к нашему блоку:
div {
background: #f0da9f;
box-shadow: 0 0 10px 0 #000;
padding: 20px;
width: 500px;
}
С самого начала мы создали блок с текстом, в дальнейшем мы задали ему фоновый цвет, фиксированную ширину, поля со всех сторон, равные двадцать пикселей. И задали тень со всех сторон при помощи CSS свойства box-shadow. А теперь разберем все параметры данного свойства. Первый параметр отвечает за смещение тени по горизонтали, т.е., по оси x. Второй параметр отвечает уже за смещение тени по вертикали, т.е., по оси y. В нашем случае мы указали этим двум параметрам нулевое значение, потому что эти два параметра являются обязательными, а мы не хотим, чтобы происходило какое-либо смещение. Следующий параметр указывает размытие тени, чем больше значение данного параметра, тем больше тень будет размыта и шире, данный параметр не является обязательным, но лучше его задавать, т.к., значение данного параметра будет установлено и равно нулю, и тень будет не размытой. Предпоследний параметр отвечает за растяжение тени, но мы ему также указали нулевое значение. И последний параметр в данном свойстве - это задание цвета для нашей тени. Благодаря таким несложным параметрам мы получили вот такую замечательную тень.
Вы можете попробовать изменять все параметры, попробуйте сделать нужную для Вас тень. Поэкспериментировав, вы сможете создавать различные тени для элементов, и никакого труда для вас данное свойство не вызовет. На этом мы завершим данную статью, желаю Вам успехов в обучении.
