Box-Shadow CSS3: тень блока (примеры)
Большое количество расположений тени блока с помощью свойства box-shadow
CSS3
HTML разметка блока:
<div class="box"></div>
Тень блока
box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .5);
Лёгкая тень
box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
Тень снизу
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .5);
Тень сверху
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5);
Тень слева
box-shadow: -5px 0 5px -5px rgba(0, 0, 0, .5);
Тень справа
box-shadow: 5px 0 5px -5px rgba(0, 0, 0, .5);
По бокам (справа и слева)
box-shadow: 0 1px 4px rgba(0, 0, 0, 1),
-23px 0 20px -23px rgba(0, 0, 0, .8),
23px 0 20px -23px rgba(0, 0, 0, .8),
0 0 40px rgba(0, 0, 0, .1) inset;
Многослойный блок
box-shadow: 6px 6px #989898, 12px 12px #6c6666;
box-shadow: 0 0 0 1px silver,
0 -20px 0 -10px coral,
20px 0 0 -10px darkturquoise,
0 20px 0 -10px gold,
-20px 0 0 -10px green;
box-shadow:
0 0 0 1px rgb(194, 192, 184) inset,
0 5px 0 -4px rgb(255, 255, 255),
0 5px 0 -3px rgb(194, 192, 184),
0 11px 0 -8px rgb(255, 255, 255),
0 11px 0 -7px rgb(194, 192, 184),
0 17px 0 -12px rgb(255, 255, 255),
0 17px 0 -11px rgb(194, 192, 184);
Разноцветная рамка
box-shadow:
-15px -15px 2px -5px rgba(123,51,90,.5),
-15px 15px 2px -5px rgba(60,74,123,.5),
15px -15px 2px -5px rgba(255,0,0,.5),
15px 15px 2px -5px rgba(60,123,68,.5);
border: 3px dashed #ccc;
box-shadow: 0 0 0 1px #ccc, inset 0 0 0 1px #ccc;
Уголки
box-shadow: -20px 20px 0 -17px #eee,
20px -20px 0 -17px #eee,
20px 20px 0 -20px #592385,
0 0 0 2px #592385;
Внутренняя тень
box-shadow: 0 0 40px rgba(0, 0, 0, .2) inset;
Вдавленный элемент
box-shadow: 0 3px 3px #575555 inset;
box-shadow:
inset 0 0 100px hsla(0,0%,0%,.2),
inset 0px 1px 5px #999,
inset 0px 2px 0px #888,
inset 0px 3px 0px #777,
inset 0px 4px 0px #666,
inset 0px 5px 0px #555,
inset 0px 6px 0px #444,
inset 0px 7px 0px #333,
inset 0px 8px 7px #001135;
Выпуклый элемент
box-shadow: 20px 0 20px -20px #000 inset, -20px 0 20px -20px #000 inset;
border-radius: 10px;
background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
box-shadow:
inset rgba(0,0,0,.6) 0 -3px 8px,
inset rgba(252,255,255,.7) 0 3px 8px,
rgba(0,0,0,.8) 0 3px 8px -3px;
Bоx-Shadow + input HTML
HTML
<div class="form-group field-contactform-name required has-error">
<input type="text" id="name" class="form-control backlight" name="name" autocomplete="off">
</div>
CSS
input.backlight{
display: block;
width: 100%;
max-width: 300px;
box-sizing: border-box;
margin: 0 auto 10px;
padding: 10px;
border: 1px solid #000;
border-radius: 4px;
box-shadow: inset 0 2px 10px 1px rgba(0,0,0,.3), inset 0 0 0 60px rgba(0,0,0,.3), 0 1px rgba(255,255,255,.08);
color: #ccc;
transition: .5s linear;
}
.backlight:focus {
outline: none;
box-shadow: inset 0 1px 3px 1px rgba(0,0,0,.5), inset 0 0 0 60px rgba(0,0,0,0), 0 1px rgba(255,255,255,.08);
}
Плоская тень с одной стороны
HTML
<p class="example-shadow-1"><a href="#btn">Flat Button</a></p>
CSS
.example-shadow-1 {
text-align: center;
}
.example-shadow-1 a {
display: inline-block;
border-radius: 5px;
padding: 15px 35px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: white;
background: #55acee;
box-shadow: 0 5px 0 #3C93D5;
transition: .3s;
}
.example-shadow-1 a:hover {
background: #6FC6FF;
}
Внутренняя тень
HTML
<p class="example-shadow-2"><span></span></p>
CSS
.example-shadow-2 {
background: #e6e3df;
text-align: center;
}
.example-shadow-2 span {
margin: 50px;
height: 100px;
width: 200px;
display: inline-block;
box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}
Генераторы box-shadow CSS
Предыдущая запись
Защита текста на сайте от копированияСледующая запись
CSS: Эффект наведения на карточку товара