Круглые углы border-radius для всех браузеров
Для скругления углов в разных браузерах используются такие команды:
border-radius: 10px; - css3 стандарт
-webkit-border-radius: 10px; - для браузеров на движке webkit, например Chrome
-moz-border-radius: 10px; - для браузеров на движке Mozilla, например Mozilla Firefox
ПРИМЕР:
#block-menu-menu-top-menu ul.menu{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Но для експлорера необходимо добавить свои фичи для того, чтобы подобные скругления углов отображались как следует.
Итак, необходимы следующие действия:
1. В корень темы необходимо положить файлик с именем "border-radius.htc" - это файл прикреплен к данной статье.
2. Затем прописать рядом с командой border-radius еще одну команду, специально для браузера Explorer: #block-menu-menu-top-menu ul.menu{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; behavior:url(/border-radius.htc); } Это дело вытягивает настройки из цсса и круглит при помощи скрипта.
Картинка-пример приведена с проекта, который теммизировала наша команда: http://samaya.ru/
Временная тестовая площадка: natal.samaya.ru.ct101.ruswebs.ru
Вложение | Размер |
---|---|
border-radius.htc | 4.77 КБ |
- Войдите чтобы оставить комментарии
Комментарии
Для поддержки CSS3 под IE 6-9 можно использовать pie.htc, домашняя страница http://css3pie.com/ .
или средствами ява квери...http://recens.ru/jquery/plugin_text_shadow.html
Итак...ИЕ побежден...любуюсьскруглениями и тенями под блоком в стиле css3...
Что для этого необходимо:
1. PIE.htc ложим в корень вебсайта!!!
2. Прописываем border-radius-ы box-shadow-ы как описано выше....
3. Прописываем САМЫМИ ПОСЛЕДНИМИ свойствами для блока, который стилизуем
position: relative;
z-index: 0;
behavior: url("PIE.htc");
Наслаждаемся результатом!!!