Блок DIV с закруглёнными углами и тенью с помощью 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!!!
Понравилась новость Блок DIV с закруглёнными углами и тенью с помощью CSS3 на MegaWeb.su? Сохрани в закладках или распечатай!
Информация

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Блок DIV с закруглёнными углами и тенью с помощью CSS3 из категории Основы / Шаблоны
- Меню навигации ⋙ Горизонтальное меню CSS3 мутный текст
- Основы / CSS ⋙ Текст с тенью css3 text-shadow примеры
- Меню навигации ⋙ CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Меню навигации ⋙ Простое горизонтальное CSS3 слайдер меню
- Основы / Шаблоны ⋙ Стильный правильный PHP редирект с таймером обратного отсчёта
- Меню навигации ⋙ Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Основы / CSS ⋙ Что такое CSS хаки или Вендорные префиксы
- Основы / CSS ⋙ Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
- Основы / Шаблоны ⋙ Резиновая таблица с закруглёнными углами и тенью
- Основы / Шаблоны ⋙ Резиновый блок DIV с закруглёнными углами тенью и фоном картинкой
Информация

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