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); }