Русские документы
Ежедневные компьютерные новости RSS rusdoc.ru  Найти :
http://www.rusdoc.ru. Версия для печати.

Закругленные уголки с помощью VML и CSS3

Раздел: Programming / Вебмастеру @ 19.08.2008 | Ключевые слова: уголки css стиль web 2.0

Автор: Егор Дмитриевич
Источник: habrahabr

jsdhfksdfsd

Наткнулся на очень интересный вариант решения очень популярной проблемы многих веб-мастеров — закругление блоков.
Для этого варианта закругления используются VML и CSS3.

Решение без картинок, работает во всех Internet Explorer’ах включая 5ый, в Firefox, в Safari, но к сожалению в старых версиях Opera не работает.

VML(англ. Vector Markup Language — язык векторной разметки) разработан фирмой Microsoft для описания векторной графики. ©wikipedia

Не буду тянуть и сразу покажу Вам css код:
v\:roundrect {

     color:#FFF;

     display:block;

     background-color:#000;

     padding:20px;

     height:100%;

     /* Для закругления уголков в остальных браузерах */

     -moz-border-radius:10px;

     -webkit-border-radius: 10px;

     border-radius: 10px;

     }



/* Для ie */

v\:roundrect  {

     behavior:url(#default#VML);

     /background-color:transparent;

     }

Наверно вы уже поняли, этот css код для закругления уголков в IE использует VML, а для остальных браузеров использует CSS3.

Теперь код самих блоков:

 Привет, я закругленный блок!


Поясню этот код. Первая строчка подключает VML. Параметр блока arcsize отвечает за радиус закругления, fillcolor отвечает за фон блока.

Не буду утверждать, что этот способ наиболее правильный, но он тоже интересен и имеет право на жизнь.

Посмотреть демо
Прочитать статью со всем нюансами

Подписаться на заметки Чернева.


Вернуться в раздел: Programming / Вебмастеру
© Copyright 1998-2012 Александр Томов. All rights reserved.