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

Автор: Admin    Категория: Основы / Шаблоны    Теги:  Скругление углов, тень    Дата: 19-02-2011, 22:02
Блок 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!!!
Версия для печати
  • 100
     Просмотров: 9 757      Комментариев: 0   

Понравилась новость Блок DIV с закруглёнными углами и тенью с помощью CSS3 на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Блок DIV с закруглёнными углами и тенью с помощью CSS3 из категории Основы / Шаблоны

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус