Содержание страницы
домикГлавная / Элементы html и css / CSS тень блока
тень блокаЧтобы применить к блоку трёхмерный эффект для увеличения его видимости и объёма, к нему применяют css свойство box-shadow, и тем самым получают красивую тень, которая и придаёт блоку изящный результат.

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

потолочные плинтуса фото в Москве

Как и писал выше, чтобы применить к блоку тень необходимо воспользоваться свойством box-shadow.

Рассмотрим, какие значения в css для тени могут использоваться в параметре box-shadow.
значения css для box-shadow

Описание значений для тени

  • 1 - это значение сдвигает тень по горизонтали ( положительное: вправо, отрицательное: влево );
  • 2 - это значение сдвигает тень по вертикали ( положительное: вниз, отрицательное: вверх );
  • 3 - это значение для размытия тени ( 0: резкая тень );
  • 4 - это значение растягивает тень ( положительное: растяжение, отрицательное: сжатие );
  • 5 - это значение для цвета тени;
  • 6 inset - говорит браузеру о том, что тень будет внутри блока, без этой записи тень будет автоматом снаружи объекта.
Обязательными значениями для тени являются 1 и 2, и если прописать только их, то оставшиеся будут принимать значения по умолчанию 0 и цвет тени при этом будет чёрным.

Чтобы получить полупрозрачную тень блока, можно также использовать формат RGBA, при котором ваша тень станет ещё более изощрённой.

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

Первый пример тень для блока.

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

<style>
.my_boks-1 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
</style>

<div class="my_boks-1">1 вариант css тени для блока</div>

2 вариант css тени для блока

<style>
.my_boks-2 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
</style>

<div class="my_boks-2">2 вариант css тени для блока</div>

3 вариант css тени для блока

<style>
.my_boks-3 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
</style>

<div class="my_boks-3">3 вариант css тени для блока</div>

4 вариант css тени для блока

<style>
.my_boks-4 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
</style>

<div class="my_boks-4">4 вариант css тени для блока</div>

5 вариант css тени для блока

<style>
.my_boks-5 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
</style>

<div class="my_boks-5">5 вариант css тени для блока</div>

Второй пример тень для блока.

Во втором примере показана как одинарная css тень ( с одной стороны или угла ), так и более насыщенные тени с боковых сторон и по горизонтали, что придаёт блокам незаурядный вид.
6 вариант css тени для блока

<style>
.my_boks-6 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
}
</style>

<div class="my_boks-6">6 вариант css тени для блока</div>

7 вариант css тени для блока

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks-7 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	position: relative;
}
.my_boks-7:before, .my_boks-7:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width: 300px;
	background: #666;
	-webkit-box-shadow: 0 14px 6px #666;
	-moz-box-shadow: 0 14px 6px #666;
	box-shadow: 0 14px 6px #666;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.my_boks-7:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}
</style>

<div class="my_doval">
    <div class="my_boks-7">7 вариант css тени для блока</div>
</div>

8 вариант css тени для блока

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks-8 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	position: relative;
}
.my_boks-8:before {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width: 300px;
	background: #666;
	-webkit-box-shadow: 0 14px 6px #666;
	-moz-box-shadow: 0 14px 6px #666;
	box-shadow: 0 14px 6px #666;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
</style>

<div class="my_doval">
    <div class="my_boks-8">8 вариант css тени для блока</div>
</div>

9 вариант css тени для блока

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks-9 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	position: relative;
}
.my_boks-9:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	right: 10px;
	left: auto;
	width: 50%;
	top: 80%;
	max-width: 300px;
	background: #666;
	-webkit-box-shadow: 0 14px 6px #666;
	-moz-box-shadow: 0 14px 6px #666;
	box-shadow: 0 14px 6px #666;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}
</style>

<div class="my_doval">
    <div class="my_boks-9">9 вариант css тени для блока</div>
</div>

10 вариант css тени для блока

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks-10 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	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;
}
.my_boks-10:before, .my_boks-10:after {
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.6);
	box-shadow: 0 0 20px rgba(0,0,0,0.6);
	top: 50%;
	bottom: 0;
	left: 10px;
	right: 10px;
	-moz-border-radius: 100px / 10px;
	border-radius: 100px / 10px;
}
.my_boks-10: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);
}
</style>

<div class="my_doval">
    <div class="my_boks-10">10 вариант css тени для блока</div>
</div>

11 вариант css тени для блока

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks-11 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	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;
}
.my_boks-11:before, .my_boks-11:after {
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 0 0 14px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 0 14px rgba(0,0,0,0.6);
	box-shadow: 0 0 14px rgba(0,0,0,0.6);
	top: 0;
	bottom: 0;
	left: 10px;
	right: 10px;
	-moz-border-radius: 100px / 10px;
	border-radius: 100px / 10px;
}
.my_boks-11: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);
}
</style>

<div class="my_doval">
    <div class="my_boks-11">11 вариант css тени для блока</div>
</div>

12 вариант css тени для блока

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks-12 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	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;
}
.my_boks-12:before, .my_boks-12:after {
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 0 0 14px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 0 14px rgba(0,0,0,0.6);
	box-shadow: 0 0 14px rgba(0,0,0,0.6);
	top: 10px;
	bottom: 10px;
	left: 0;
	right: 0;
	-moz-border-radius: 100px / 10px;
	border-radius: 100px / 10px;
}
.my_boks-12: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);
}
</style>

<div class="my_doval">
    <div class="my_boks-12">12 вариант css тени для блока</div>
</div>

13 вариант css тени для блока

<style>
.my-box-back{
    min-height: 100%;
    margin: 40px auto;
    padding: 0;
    position: relative;
    z-index: 1;
}
.my_boks-13 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	border: 1px solid #D5D5D5;
	border-radius: 2px;
	-webkit-box-shadow: inset 0 0 10px rgba(48, 48, 48, 0.2), 0 0 2px rgba(30, 30, 30, 0.2);
	-moz-box-shadow: inset 0 0 10px rgba(48, 48, 48, 0.2), 0 0 2px rgba(30, 30, 30, 0.2);
	box-shadow: inset 0 0 10px rgba(48, 48, 48, 0.2), 0 0 2px rgba(30, 30, 30, 0.2);
}
.my_boks-13:after {
	border-radius: 0 0 100% 100%;
	-webkit-box-shadow: 0 16px 8px rgba(56, 56, 56, 0.4);
	-moz-box-shadow: 0 16px 8px rgba(56, 56, 56, 0.4);
	box-shadow: 0 16px 8px rgba(56, 56, 56, 0.4);
	content: '';
	bottom: 8px;
	left: 16px;
	right: 16px;
	top: 0;
	position: absolute;
	z-index: -1;
}
</style>

<div class="my-box-back">
  <div class="my_boks-13">13 вариант тени для блока</div>
</div>

Для того, чтобы блок заимел выпуклость, необходимо добавить в свойство значение inset, и увеличить значение для размытия тени ( смотрите выше ).
14 вариант css тени для блока

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks-14 {
	margin: 40px auto;
	padding: 40px 10px;
	color: #532;
	background: #fff;
	text-align: center;
	display: block;
	position: relative;
    -webkit-box-shadow: 0 0 30px 10px #AAA inset;
    -moz-box-shadow: 0 0 30px 10px #AAA inset;
    box-shadow: 0 0 30px 10px #AAA inset;
}
.my_boks-14:before, .my_boks-14:after {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    top: 50%;
    bottom: 0;
    left: 10px;
    right: 10px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}
.my_boks-14: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);
}
</style>

<div class="my_doval">
    <div class="my_boks-14">14 вариант тени для блока</div>
</div>

Дата публикации: 26.03.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!