Апрель » Уроки по CSS » Оформление блока div рамкой с закругленными углами и тенью

Оформление блока div рамкой с закругленными углами и тенью

galina2601 14-01-2014, 16:41 17 562 Уроки по CSS

Для выделения какого-либо фрагмента текста на странице можно воспользоваться стилевыми свойствами CSS3. На данный момент практически все браузеры поддерживают свойства border-radius (скругление углов) и box-shadow создание тени.

Вот пример блока с тенью, но без скругления углов

Вот пример блока со скругленными углами

Итак, нам нужно создать блок, содержащий текст и картинку. Этот блок будет выделен рамкой со скругленными углами и тенью.

Блоку дадим имя, то есть присвоим какой-либо идентификатор.

<p>Текст внутри блока</p>

</div>

В таблицу стилей дописываем следующее описание:

.ramka{

background: #FF9; /* Фоновый цвет блока */

width:250px; /* Ширина блока */

height: 50px; /* Высота блока */

border:4px solid #777; /* Ширина вид и цвет рамки */

border-radius:30px; /* Радиус скругления углов*/

-webkit-border-radius:30px; /* Safari, Chrome */

-moz-border-radius:30px; /* Firefox */

box-shadow: 0 0 10px 2px #1A3457; /* Тень*/

-webkit-box-shadow: 0 0 10px 2px #1A3457; /* Safari, Chrome */

-moz-box-shadow: 0 0 10px 2px #1A3457; /* Firefox */

}

/* ТЕНЬ

* Первое значение(цифра) задает смещение тени по оси X (горизонтали). Может задаваться в любых допустимых единицах измерения CSS. Положительное значение задает смещение вправо, отрицательное – смещение влево;

* Второе значение(цифра) задает смещение по оси Y (вертикали). Положительное значение соответствует смещению вниз, отрицательное – вверх;

* Третье значение(цифра) определяет радиус размытия. Отрицательные значения недопустимы;

* Четвертое значение(цифра) – радиус растяжения тени. Положительные значения растягивают тень во всех направлениях, отрицательные сужают;

* color – базовый цвет тени;

* Если указано ключевое слово inset, тень будет направлена внутрь элемента.*/

Текст внутри блока

Кстати, можно с помощью стилей добавить дополнительный эффект при наведении на блок курсора мышки. Для этого при описании стилей блока нужно добавить внизу еще одну строку.

.ramka:hover{border:4px solid #f77;}

То есть при наведении на блок курсора меняется цвет рамки.

Авторизация на сайте

Последнее из портфолио

Как с нами связаться

Оформление блока div рамкой с закругленными углами и тенью

Похожие новости

Добавить комментарий