Кроссбраузерный, валидный "border-radius"

[timlar]

Т.к. тема не имеет отношения к фреймворку и пхп, решил разместить тут.

Хотелось бы обсудить и услышать рекомендации, как же все таки можно сделать кроссбраузерное скругление углов у блоков? Сэм в своем блоге предложил один из вариантов: http://rmcreative.ru/blog/post/krossbra ... der-radius, но в Опере скругление не работает. В ФФ, Хроме и ИЕ вроде бы нормально.

Кто чем пользуется? Как решаете поставленную задачу?

[samdark]

В Opera, начиная с 10.50, работает.

[timlar]

У меня 10.10 Но хочется, чтобы еще и в 9-й работало... А то как-то не кошерно получается

[Ekstazi]

Скругление работает только для всех уголков сразу, если б можно было использовать border-radius-topleft и так далее, то было бы очень хорошо

[timlar]

Только что у Google'а поинспектил FireBug'ом html на предмет того, как у них в GMail'е сделано скругление углов... Во всплывающих сообщениях сделано вот так:

Код: Выделить всё

<style type="text/css">
.top {
    border-bottom:  2px solid;
    border-left:    2px dotted transparent;
    border-right:   2px dotted transparent;
}
.middle {
    background:     #c00;
    color:          #fff;
    padding:        4px 8px;
}
.bottom {
    border-top:     2px solid;
    border-left:    2px dotted transparent;
    border-right:   2px dotted transparent;
}
.top, .bottom {
    border-bottom-color:    #c00;
    border-top-color:       #c00;
}
</style>

<div class="top"></div>
<div class="middle">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
<div class="bottom"></div>
 

Это позволяет скруглять на небольшой радиус, буквально в пару пикселей. Дальше уже некрасиво и угол получается не скругленным, а срезанным. В принципе, для вывода каких-то сообщений небольших, можно использовать.

В остальных случаях, где нужны скругления, они используют картинки. Одна картинка в виде кружочка, которая находится в блочном элементе в качестве бэкграунда и там позиционируется в CSS. Один из распространенных методов.

[Ekstazi]

Я знаю, тоже ковырял. я вот другого не могу понять. Как они сделали чтоб на http://code.google.com/p/yii/issues/det ... colspec=ID Type Status Priority Milestone Owner Stars Summary этой странице при прокрутке блок слева доходил до границы окна и дальше не двигался. Никаких скриптов делающих такое не обнаружил.

[timlar]

Там по ходу ничего сложного. Скрипт, при прокрутке окна до определенной области, назначает блоку класс, в котором описано фиксированное положение блока, и затем, если окно вернулось обратно, убирает класс. Где-то видел похожую реализацию на jQuery, вот только не помню названия плагина.

[samdark]

Однако, интересное решение у Google. Использовать точки для скругления.

[Ekstazi]

И впрямь скрипт.
Sam Dark: зато антиальясинга нет.

[timlar]

И впрямь скрипт.
Sam Dark: зато антиальясинга нет.

Там скрипта нет, там css чистый

[timlar]

Я знаю, тоже ковырял. я вот другого не могу понять. Как они сделали чтоб на http://code.google.com/p/yii/issues/det ... colspec=ID Type Status Priority Milestone Owner Stars Summary этой странице при прокрутке блок слева доходил до границы окна и дальше не двигался. Никаких скриптов делающих такое не обнаружил.

Держи http://www.simplecoding.org/plavayushhi ... iya-2.html

[samdark]

Да, чувствую, раздел по клиентсайду всё-таки нужен…

[timlar]

Да, чувствую, раздел по клиентсайду всё-таки нужен…

Урааа!!!!