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

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

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

Стиль CSS

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

Стандартная маленькая тень:

Стиль CSS

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

Стандартная средняя тень:

Стиль CSS

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

Стандартная большая тень:

Стиль CSS

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

Тень внизу:

Стиль CSS

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

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

Стиль 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;}{codeBox}

Вдавленный блок:

Стиль CSS

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