box shadow generator

Отображение тени box shadow



Красная тень
Зеленая тень
Синяя

Готовый box shadow css


box shadow css свойства.


Чтобы украсить блоки или кнопки на landing page воспользуемся свойством box shadow. Тень хорошо подойдет для элементов при наведении на них. Например, навели курсор мышки на кнопку, она получилась светящейся с эффектом тени. Рассмотрим подробно все css свойства box shadow background.
  • Смещение тени по оси в 360 градусов. Направление оси задается вручную в поле направление тени. Первый параметр box shadow 1px 0 0.
  • Направление тени, куда будет смещаться тень. Регулируя смещение и направление тени изменяются первые два свойства box shadow 1px 2px 0.
  • Размытие тени. У тени пропадает четкость box shadow 0 0 3px. Это третий параметр.
  • Прозрачность тени. Уменьшается видимость тени.
  • Цвет тени. box shadow rgba Меняем курсором три цвета синий, красный и зеленый, чтобы подобрать нужный оттенок цвета.
Чтобы создать внутреннюю тень используем свойство box shadow inset. webkit box shadow это дополнительное свойство, которое поддерживает другие браузеры.

box shadow generator все свойчтва

Красивые box shadow примеры


Рассмотрим три вида примеров с использованием тени у элемента

Элемент с эффектом нескольких слоев в box shadow

.boxShadow1 { width: 80%;
max-width: 550px;
margin: 3em auto 2em;
padding: 2em;
box-shadow:
0 0 0 1px SeaGreen,
0 -20px 0 -10px Lime,
20px 0 0 -10px Turquoise,
0 20px 0 -10px DeepSkyBlue,
-20px 0 0 -10px DeepPink;
}
.boxShadow2 {
width: 80%;
max-width: 550px;
margin: 3em auto;
padding: 1em;
box-shadow:
0 0 0 7px DarkMagenta,
0 0 0 14px Magenta,
0 0 0 21px Violet;
}

Оригинальная простая рамка

.boxShadow3 {
width: 80%;
max-width: 550px;
margin: 3em auto;
padding: 1em;
box-shadow:
-20px 20px 0 -17px Snow,
20px -20px 0 -17px Snow,
20px 20px 0 -20px DeepSkyBlue,
0 0 0 2px DeepSkyBlue;
}

Выпуклый элемент с помошью box shadow

.boxShadow4 {
width: 80%; max-width: 550px;
margin: 1em auto; padding: 1em; border: 1px solid rgb(100,100,100);
box-shadow: 20px 0 20px -20px Indigo inset, -20px 0 20px -20px Indigo inset;
}
.boxShadow5 {
width: 80%;
max-width: 500px;
margin: 1em auto;
padding: 1em;
color: snow;
border-radius: 10px;
background: rgb(100,100,100) radial-gradient(circle at 0 0, Orchid, RoyalBlue);
box-shadow:
inset rgba(0,0,0,.5) -3px -3px 8px,
inset rgba(255,255,255,.9) 3px 3px 8px,
rgba(0,0,0,.8) 3px 3px 8px -3px;
}