Наткнулся на очень интересный вариант решения очень популярной проблемы многих веб-мастеров — закругление блоков.
Для этого варианта закругления используются 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 --> <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /> <v:roundrect arcsize=".04" fillcolor="#000"> Привет, я закругленный блок! </v:roundrect>
Поясню этот код. Первая строчка подключает VML. Параметр блока
arcsize отвечает за радиус закругления, fillcolor отвечает за фон блока.Не буду утверждать, что этот способ наиболее правильный, но он тоже интересен и имеет право на жизнь.
Посмотреть демо
Прочитать статью со всем нюансами
Подписаться на заметки Чернева.
