Несколько вариантов оформления блоков с помощью теней. Варианты оформления блоков с помощью стиля box-shadow. сама тень создается классом shadow, стиль которого можно поглядеть во вкладке CSS.
Тень с оплаты Mykassa
CSS
.shadow {
box-shadow: 0px 0px 6px -3px;border:1px solid #DCDCDC;
}
Стандартная маленькая тень:
CSS
.shadow {
box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);border:1px solid #DCDCDC;
}
Стандартная средняя тень:
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: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);
}
Простая тень по бокам блока:
CSS
.shadow {
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}