Скруглённые углы на чистом CSS для Opera 9.5, FF 1.5, IE 5, Konqueror и Safari3
Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style> v\:* { behavior: url(#default#VML); display: block; } </style>
<![endif]-->
<title>Скруглённые углы</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { background: white; color: black; font: 12px Arial, sans-serif; }
.rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }
/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:
<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
<rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>
В этой картинке подготавливается бакграунд со скруглёнными углами
*/
noindex:-o-prefocus, .rounded-svg {
background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
border: none !important;
}
/* для разных браузеров указываем rounded corner через CSS3-свойство */
.rounded-css3 {
border: 1px solid black;
-moz-border-radius: 1em; /* mozilla 1.5 */
-webkit-border-radius: 1em; /* safari 3 */
-khtml-border-radius: 1em; /* Konqueror */
border-radius: 1em; /* CSS3 */
}
</style>
</head>
<body >
<!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
<!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
<p>Вот эти ребята!</p>
<!--[if !vml]>--></div><!--<![endif]-->
<!--[if vml]></v:roundrect><![endif]-->
</body></html>В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как
Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).
Для остальных браузеров используются их префиксное свойство
Комментарии 59
сафари, фф и ие таки да, показали ).
болк крутой!
Например http://cssing.org.ua/2008/06/23/rounded-co …
Другое дело, что этот товарищ на меня сослался, но у меня SVG нет, только VML. Что ему мешало выкатить свой пример с SVG, я лично не совсем понимаю.
Про -
Кстати, в поисках лучшего решения для «Оперы» (тут требовалось отрубить border),
В принципе, можно использовать SVG как фон и в Safari, но ограничения там дурацкие:
1) Начиная с Safari 3.1
2) Размер SVG должен совпадать с размером блока
http://ad.by/svg-test/svg_rounded_corner_safari31.html
Потому что качество лучше и ровнее.
Ну а тогда зачем? :) Прямой путь — это
Комментарий для Евгения Степанищева:
Лучше «с картинками». Качество скруглений не зависит от модели браузера и потому ровнее.
http://muxa.ru/img/bolk-round.jpg
верхний-левый угол
Да и само по себе, качество скругления полученого из графического редактора будет выше чем сделает браузер. Специализация.
З.Ы. а теперь всё тоже самое плюс:
— залить цветом
— залить цветом и положить вертикальный градиент у верхней границы
— залить цветом и положить горизонтальный градиент у левой границы
— залить цветом и положить фоновую картинку прижатую в
http://www.picamatic.com/view/640057_rounds/
На мой взгляд приемлим только сафарийский вариант.
http://habrahabr.ru/blog/opera/44411.html
Болк молодец
О
— залить цветом
— залить цветом и положить вертикальный градиент у верхней границы
— залить цветом и положить горизонтальный градиент у левой границы
— залить цветом и положить фоновую картинку прижатую в
[Q]
И тенющечки, тенюшечки чтоб были.
чтобы вернуть опере прежний вид: меню — tools — appearance — skin — classic
ну или http://my.opera.com/spybot2d/blog/2008/06/ … -
Слушай, а ты -
Я пробовал Konqueror 4.00.83 (win32) и Konqueror 3.4.0 (cygwin) — не работает совсем. И в бинарниках не находится.
Дотюнить по размерам — дело несложное, это не так важно. Качество скругления мне на глаз кажется одинаковым.
Положить градиент картинкой совсем несложно, не понимаю в чём тут затруднения.
Она не стилизована под «хрен знает что», это новый скин и именно в нём будут все новые измененения происходить :)
Положить градиент картинкой совсем несложно, не понимаю в чём тут затруднения.
тенюшечки — через shadow или положить картинкой, тоже мне фокус :)
Не проверял, негде мне. В интернетах нашёл.
Мне мешала лень. Вот пример: http://elv1s.ru/files/html%2Bcss/vector-corners.html
Получилось почти как у Болка. Правда у него хаки другие и SVG вставлено через base64.
У меня в ссылке опять «+» заменяется на «%20»
У тебя же файлы сегодня созданы ;) http://elv1s.ru/files/html%2Bcss/
правда
и вообще w3c тянет и тянет резину с css3 :(((((( пора им что то менять иначе css3 в полной форме выйдет лишь лет через
да ие безнадежен или gracefull degradation для него или через экспрешены
В этом вопросе безнадёжна «Опера», в IE
+ Без кондишен коментариев.
+ Всё в css
+ Можно применять к чему угодно — названия классов не зашиты в функцию
— Ну скрипт, ну так что же?
ps. Пока некогда самому, но если
Объявляем ns:v и спокойно делаем в Opera & FF. Оформляем их через css как v\:roundrect{}.
В xhtml+xml режиме Opera&FF работает
@namespace v
Понадобилось сразу же сделать скруглённые уголки у картинок.
В IE всё решилось добавкой в
В FF и так всё хорошо.
В Opera возникла проблема — прописанный в svg работает отлично, но зачем нам такое нужно, плодить svg, особенно если используется cms?
К SVG
Может есть
Проблема в том, что на не действуют в
Т.е. для окончательного решения вопроса требуется:
1. Найти как заставить подчиняться css через классы.
2. Достать src картинки из SVG, которое можно заранее прописать как атрибут скриптом из svg
3. Если 1 получилось, а 2 не получается — прописать в каждом свой style="background-image:url(round.svg?myimage.jpg);" и внутри SVG скриптом определять параметр и использовать его на
И всё это только ради Оперы.
Посмотрите мою посленюю заметку, решение сразу найдётся. По поводу того как передать в SVG картинку сказать не могу, да и не надо это. Не понимаю чем плохо внедрять SVG в CSS.
Тем более, что SVG это вектор, а JPEG — растр. Именно поэтому я применяют svg background.
В IE+FF решаема без проблем. Я сразу отказался от [if vml] и сделал namespace:v для этих целей. А в Опере для каждого блока потребуется отдельный SVG. Хотелось бы использовать одну
Задача2: Скругление уголков у картинок (как пример: новостная лента или аватары)
Например при генерации кода, конечно же мы знаем адрес картинки и можем использовать его в html. Для того чтобы скруглить в Опере уголки у картинки, пока есть один способ — сделать svg с картинкой и маской и применить его как
p.s. Не забываем, что у мы используем всё только на блоках для интеграции с IE и забываем о замене его на div или на svg, чтобы не усложнять вёрстку.
p.p.s. Фон для картинок может быть любым и неоднородным. Обработка картинок на сервере не подходит.
-----------------
Сейчас я всё же делаю отдельные svg для каждого блока и применяю их через враппер (или просто через родительский блок) #wrapper v|roundrect{…} так как class на объекты из инопланетянского namespace не работает!
в спецификации указано
http://blog.ad.by/2008/08/easy-way-to-embe … png24.html
Да, именно так в спецификации и написано. noindex — это просто тег, можно написать «xxx» или
Вообще только и мечтаю чтобы давно уже все браузеры перешли на css3 сидим блин в каменном веке и наслаждаемся фоксом
Некорректно комментировать статью пятилетней давности. Откройте