Напівпрозорі об’ємні округлі прямокутники, лише з CSS

Такий поширений об’єкт дизайну веб-сторінок, як бокс з округлими кутами і тінню, можна побудувати з CSS без використання зображень. Більше того, існує можливість контролювати рівень прозорості прямокутника, в той час як прозорість тексту в боксі не змінюватиметься. Використання даних атоматичних функцій значно полегшує редагування масштабу, та позбавляє від необхідності використання великої кількості зображень.

CSS:

.box {

-moz-border-radius: 1em;

-webkit-border-radius: 1em;

border-radius: 1em; (Радіус кута бокса)

-webkit-box-shadow: 3px 3px 6px #666;

-mox-box-shadow: 3px 3px 6px #666;

box-shadow: 3px 3px 6px #666; (Величина, віддаль і колір тіні)

background-color: rgba(0,0,0,0.8); (Перші три показника визначають колір, прозорість встановлена на 80% )}