14.01.2014

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

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

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

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

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

<div class="ramka">

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

   <img src="1.gif" title="картинка внутри блока">

</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;}

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