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

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

Несколько вариантов оформления блоков с помощью теней. Варианты оформления блоков с помощью стиля 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%); }



Отправить комментарий

Новые Старые

نموذج الاتصال