Тени для оформления блоков Блоггер

Тень может красиво выделить картинку, кнопку, рамку, текст, заголовок в статье. Всего лишь тень, но она может изменить внешний вид элемента до не узнаваемости. Она бывает цветной, анимированной, градиентной и так далее. Она незаменима, если нужно сделать выпуклость или вогнутость. 
Давайте немного пробежимся по основным свойствам тени на css. И посмотрим коды для того или иного элемента, авось они пригодятся.

Для добавления тени используется свойство box-shadow (для блоков), text-shadow (для текста).
none
Отменяет тень.
inset
Тень элемента. Необязательный параметр.
Сдвиг по x
Тень смещается по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
Сдвиг по y
Тень смещается по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
Размытие
Радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если тень нулевая (0), то она будет четкой.
растяжение. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Цвет
Цвет тени можно задать в любом формате css, по умолчанию она черная. Необязательный параметр.

Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают свойство -webkit-box-shadow.
Firefox до версии 4.0 поддерживает свойство -moz-box-shadow.
Internet Explorer до версии 9.0 не поддерживает свойство box-shadow.

Генераторы тени блока

Для облегчения создания кода, в сети есть генераторы тени, что-то сложное они не сделают, а простую тень сгенерируют быстро:
https://tamali.net/instrument/html-css/css-box-shadow/
https://www.cssmatic.com/box-shadow
https://css3gen.com/box-shadow/
http://ilyakhasanov.ru/onlajn-servisy/css-generatory/sozdat-ten-u-blokov
https://cssgenerator.org/box-shadow-css-generator.html
https://html-css-js.com/css/generator/box-shadow/
https://ciox.ru/box-shadow-generator
https://sitespectr.ru/gener-ten-block-css/

Примеры тени блоков на css:

Коды вставляем, если нужно в статью, то в редакторе блога, в режиме ХТМЛ. 

Приподнятые нижние уголки

Код:

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks {
margin: 40px auto;
padding: 40px 10px;
color: #532;
background: #fff;
text-align: center;
display: block;
position: relative;
}
.my_boks:before, .my_boks: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: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">вариант 1</div>
</div>

Приподнятый уголок 1

Код:

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks{
margin: 40px auto;
padding: 40px 10px;
color: #532;
background: #fff;
text-align: center;
display: block;
position: relative;
}
.my_boks: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">2 вариант</div>
</div>

Приподнятый уголок 2

Код:

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks {
margin: 40px auto;
padding: 40px 10px;
color: #532;
background: #fff;
text-align: center;
display: block;
position: relative;
}
.my_boks: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">3 вариант </div>
</div>

Внутренняя, объёмная тень

Код:

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks {
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:before, .my_boks: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: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">Вариант 4</div>
</div>

Приподнят блок внизу в центре по горизонтали

Код:

<style>
.my-box-back{
    min-height: 100%;
    margin: 40px auto;
    padding: 0;
    position: relative;
    z-index: 1;
}
.my_boks {
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: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">5 вариант</div>
</div>

Приподняты две стороны по горизонтали в центре

Код:

<style>
.my_doval {
    margin: 20px auto;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}
.my_boks {
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:before, .my_boks: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: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">6 вариант </div>
</div>

Эффект стопки листов

Код:

<div class="my_doval">
    <div class="my_boks">7 вариант</div>
</div>
<style>
.my_boks
{
width: 100%;
max-width: 700px;
margin: 2em auto;
padding: 1em;
background: #DADADA;
box-shadow: 6px 6px #BBBBBB, 12px 12px #919191;
}</style>

Тень расплывчатая

Код:

<div class="my_doval">
<div class="my_boks">
8 тень блока</div>
</div>
<style>
.my_boks
 {
width: 80%;
max-width: 600px; /* ширина блока */
margin: 2em auto;
padding: 4em;
background: #8c08f3; /* цвет тени */
box-shadow: 0 0 4em 4em #fff inset;
 }</style>

Разноцветная тень

Код:

<div class="my_doval">
<div class="my_boks">
9 тень блока</div>
</div>
<style>
.my_boks
 {
width: 70%;  /* ширина блока*/
margin: 0 auto;
padding: 2em;
box-shadow: 0 0 0 1px #ccc,
0 -20px 0 -10px #00FF00,
20px 0 0 -10px #FF0000,
0 20px 0 -10px #FFFF00,
-20px 0 0 -10px #FF3399;
 }</style>

Красным выделила цвет тени у блока

Двойная тень блока

Код:

<div class="koshadows_nalinedsup"> 10 тень блока</div>
<style>.koshadows_nalinedsup {
  padding: 9px;
  margin: 18px;
  width: 600px; /* ширина блока */
  height: 200px; /* высота блока */
  box-shadow: 0px 0px 14px 2px #0dec0d inset, 4px 4px 9px #0e0eef, -4px -4px 9px #ea0909;
  border-radius: 4px;
}</style>