Красивый блок для сайта



Закругленные углы очень популярны в современном веб-дизайне. Есть множество вариантов их реализации. Используют размещение изображений по углам контейнера, используются теги img, свойство background, для некоторых браузеров есть специфические решения, например box-shadow.

Рассмотрим некоторые приемы оформления блоков с помощью стилей CSS.

Легкое вдавливание


Будем работать с параметром box-shadow. Напомню, что это свойство добавляет тень к элементу. Углы немного скругляем , применив свойство border-radius.

.vdavlivanie { background:#000; color:#FFF; box-shadow: 0px 2px 3px #555; -webkit-box-shadow: 0px 2px 3px #555; -moz-box-shadow: 0px 2px 3px #555; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Выпуклость


Если ваша страница темного цвета, то этот эффект будет смотреться очень интересно. Основной фон и фон блока подбирается в процессе работы. Поиграйте с цветами фона и вы можете получить очень интересный результат.

.vdavlivanie1 { color:#999; box-shadow: 0px 2px 3px #555; -webkit-box-shadow: 0px 2px 3px #555; -moz-box-shadow: 0px 2px 3px #555; border: 1px solid #D6D3D3; border-bottom: 2px solid #C4C2C2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:5px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Тень для блока


Придать небольшую тень блоку можно за счет установки границ серого цвета. Подбирается основной цвет и оттенок нижней границы блока. Используется параметр border-bottom. Поддерживается практическими всеми браузерами. Смотрится очень интересно, без раздражения.

.bord { border: 2px solid #D6D3D3; border-bottom: 3px solid #C4C2C2; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Объемность блока


Объемность блока можно сделать за счет свойства border-radius. Выбираете размер радиуса, делаете подборку цвета. С помощью box-shadow сделайте тень блока (играет роль размер тени и цвет).

.bord1 { background-color: #EEF; color: #4D4B4B; border: 2px solid #999999; border-radius: 12px 12px; -moz-border-radius: 12px 12px; -webkit-border-radius: 12px 12px; box-shadow: 3px 3px 5px #999; -webkit-box-shadow: 3px 3px 5px #999; -moz-box-shadow: 3px 3px 5px #999; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Смотрите также "Скругление углов css"