Делаем тень на CSS

Существует огромное множество самых разных способов имитировать тень от элемента на веб странице. Одни предлагают использование изображений, другие javascript или jquery. В статье я расскажу, как сделать тень у элемента на чистом css.

Начнем с html разметки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Тень на CSS</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<style>
		body {
			margin: 0px;
			padding: 20px;
			font-family: verdana;
			font-size: 12px;
		}
	</style>
 
</head>
 
<body>
 
	<div id="shadow-container">
		<div class="shadow1">
			<div class="shadow2">
				<div class="shadow3">
					<div class="container">
У слоя с этим текстом мы сделаем тень с помощью несложного CSS-кода и html-разметки
					</div>
				</div>
			</div>
		</div>
	</div>
 
</body>
</html>

В разметке видим слой container, обернутый в четыре слоя: id=»shadow-container», shadow1, shadow2, shadow3. Теперь css-код:

#shadow-container {
	position: relative;
	left: 3px;
	top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
}
 
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
	position: relative;
	left: -1px;
	top: -1px;
}
 
	#shadow-container .shadow1 {
		background: #F1F0F1;
	}
 
	#shadow-container .shadow2 {
		background: #DBDADB;
	}
 
	#shadow-container .shadow3 {
		background: #B8B6B8;
	}
 
	#shadow-container .container {
		background: #ffffff;
		border: 1px solid #848284;
		padding: 10px;
	}

Тут тоже ничего сложного. Смещаем самый нижний слой на 3 пикселя вправо вниз, затем, относительно него сдвигаем слои shadow на 1 пиксель влево вверх и закрашиваем цветом, с каждым слоем все более темным. Тень готова!

Запись опубликована в рубрике Без рубрики с метками . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">