MegaWeb.su Главная > Шаблоны > Блок DIV с закруглёнными углами и тенью с помощью CSS3

Блок DIV с закруглёнными углами и тенью с помощью CSS3


19-02-2011, 22:02. Разместил: Admin
Блок DIV с закруглёнными углами и тенью с помощью CSS3Самый простой и продвинутый способ сделать блок с закруглёнными углами и тенью на CSS3
На данный момент все современные браузеры последних версий(кроме IE) поддерживают свойства CSS3 border-radius - скругление углов,
box-shadow - тень, благодаря этому мы можем сделать стильный блок с закруглёнными углами и тенью всего одним DIVом.

Для того, что бы реализовать этот стильный эффект у себя на сайте, достаточно прописать несложный HTML код блока:

<div class="bord">
<p>Содержимое</p>
</div>


И в свою таблицу стилей скопировать правило:


/* DIV с закруглёнными углами и тенью с помощью CSS3 от http://megaweb.su/   */
.bord{
    background: #FF9; /* Фоновый цвет блока */
    width:500px; /* Ширина блока */
    height: auto; /* Высота блока */
    border:4px solid #FF9; /* Размер вид и цвет рамки */
    border-radius:30px; /* Валидное свойство CSS3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:30px; /* Safari, Chrome */
    -moz-border-radius:30px; /* Firefox */
    box-shadow: 0 0 10px 2px #1A3457; /* Валидное свойство CSS3 тень*/
    -webkit-box-shadow: 0 0 10px 2px #1A3457; /* Safari, Chrome */
    -moz-box-shadow: 0 0 10px 2px #1A3457; /* Firefox */
    /* ТЕНЬ   Первое значение(цифра) задает смещение тени по оси X (горизонтали). Может задаваться в любых допустимых единицах измерения CSS Положительное значение задает смещение вправо, отрицательное – смещение влево;
    * Второе значение(цифра) задает смещение по оси Y (вертикали). Положительное значение соответствует смещению вниз, отрицательное – вверх;
    * Третье значение(цифра) определяет радиус размытия. Отрицательные значения недопустимы;
    * Четвертое значение(цифра) – радиус растяжения тени. Положительные значения растягивают тень во всех направлениях, отрицательные сужают;
    * color – базовый цвет тени;
    * Если указано ключевое слово inset, тень будет направлена внутрь элемента.*/
}
/* DIV с закруглёнными углами и тенью с помощью CSS3 от http://megaweb.su/  end  */


Вот и всё. Как это выглядит можно увидеть на картинке к новости. Ещё раз напоминаю - Эти свойства работают только в нормальных браузерах, а браузер IE к нормальным не относится и не поддерживает новые свойства CSS3!!!
Вернуться назад