Скруглённые уголки одним элементом
Задача создания на странице элемента со скруглёнными уголками классически решается пятью элементами: один для создания бордюра и 4 для уголоков, в которые помещаются фоновые картинки уголков.
Упрощённо, это выглядит так:
TEXT
Недавно мне пришла в голову мысль, что можно обойтись двумя элементами, задав внешнему бордюр и относительное позиционирование и для внутреннего и внешнего определив :before и :after, после чего сгенерированные блоки спозиционировать абсолютно.
Написал вчера тестовый пример, в опере всё заработало. Ура! Проверяю в Mozilla Firefox 1.0. Блядские броузеры! Не понимает gecko позиционирования сгенерированных блоков.
Гуглю, думая что найду workaround, нахожу пример, как можно решить эту задачу одним(!) элементом.
Упрощённо, это выглядит так:
TEXT
Просто супер! Пишу свой пример.
Итого, если хочется сделать закруглённые уголки в msie, gecko и опере, то можно использовать один элемент и много css кода. В мозилле используем -moz-border-radius, в опере генерацию контента, для msie, как обычно, пишем костыли в виде htc.
Багу про абсолютное позиционирование в gecko я зарепортил. Там и скриншоты есть.
Упрощённо, это выглядит так:
TEXT
Недавно мне пришла в голову мысль, что можно обойтись двумя элементами, задав внешнему бордюр и относительное позиционирование и для внутреннего и внешнего определив :before и :after, после чего сгенерированные блоки спозиционировать абсолютно.
Написал вчера тестовый пример, в опере всё заработало. Ура! Проверяю в Mozilla Firefox 1.0. Блядские броузеры! Не понимает gecko позиционирования сгенерированных блоков.
Гуглю, думая что найду workaround, нахожу пример, как можно решить эту задачу одним(!) элементом.
Упрощённо, это выглядит так:
TEXT
Просто супер! Пишу свой пример.
Итого, если хочется сделать закруглённые уголки в msie, gecko и опере, то можно использовать один элемент и много css кода. В мозилле используем -moz-border-radius, в опере генерацию контента, для msie, как обычно, пишем костыли в виде htc.
Багу про абсолютное позиционирование в gecko я зарепортил. Там и скриншоты есть.