Тени для блоков. Несколько вариантов оформления блоков с помощью теней.

Несколько вариантов оформления блоков с помощью теней. Варианты оформления блоков с помощью стиля box-shadow.

Для всех блоков в примерах применен общий стиль:

• width: 80%;
• margin: 40px auto;
• padding: 40px;

А сама тень создается классом shadow, стиль которого можно поглядеть во вкладке CSS

Стандартная маленькая тень (Пример):

CSS

.shadow { box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2); }

Стандартная средняя тень (Пример):

CSS

.shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); }

Стандартная большая тень: (Пример):

CSS

.shadow { box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3); }

Тень внизу (Пример):

CSS

.shadow {box-shadow: 0 20px 16px -16px rgba(0,0,0,0.6);}

Эффект изогнутого блока с тенью слева и справа: (Пример):

CSS

.shadow { box-shadow: 0 1px 4px rgba(0,0,0,0.3), -23px 0 20px -23px rgba(0,0,0,0.8), 23px 0 20px -23px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.1) inset; }

Эффект изогнутого блока с тенью внизу: (Пример):

CSS

.shadow { box-shadow: 0 1px 4px rgba(0,0,0,0.3), -23px 0 20px -23px rgba(0,0,0,0.8), 23px 0 20px -23px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.1) inset; }

Вдавленный блок: (Пример):

CSS

.shadow { box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1); }

Внутренняя тень вверху блока: (Пример):

CSS

.shadow { box-shadow: inset 0 20px 16px -16px rgba(0,0,0,0.6); }

Тень по бокам блока: (Пример):

CSS

.shadow { box-shadow: 5px 5px 45px -27px rgb(0 0 0 / 50%); -webkit-box-shadow: 5px 5px 55px -27px rgb(0 0 0 / 50%); }

Простая тень по бокам блока: (Пример):

CSS

.shadow { box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); }