Демонстрация свойства border-radius

Веб разработка - CSS

Нет-нет, я не буду вам показывать простые закруглённые прямоугольники, которые порядком приелись. Но те же самые простые закруглённые прямоугольники могут складываться во вполне осмысленные фигуры. У меня они сложились в слово «twitter».

Работает только в браузерах на движках Gecko и Webkit.

Выглядит так:



Но перед тем как показывать кусок вёрстки, виновницы этой записи, хочу пожаловаться общественности на поведение браузеров, которое нельзя назвать достойным.

Все браузеры, в той или иной мере, дразнят нас теми свойствами, которые прямо сейчас использовать если и можно, то они не критичны. А критичные свойства CSS3 использоваться сейчас противопоказано, когда тот же border-radius не стесняются использовать многие, в том числе и я.

Я вполне понимаю, что CSS3 ещё не оформлено должным образом, и ругать браузеры за то, что они как хотят, так и вертят вызовом свойства border-radius, ну понятное дело, речь о - moz - и - webkit-. Ну а атрибуты свойства — так и вовсе рознятся, но тут всё более серьёзно упирается в неготовность спецификации CSS3.

И вот что непонятно, почему такая прогрессивная Opera не научила свой движок рендерить border-radius? Или я плохо искал, и что-то пропустил? Даже 10beta не рендерит — чем меня сильно расстроила.

Как вы думаете, стоит ли использовать некритичные для пользователей прелести CSS3, игнорируя тех, кто сидит на других браузерах, естественно, не в ущерб функционалу?

Ладно, хватит о теории, перейдём к практике. Пару дней назад, отдыхая с коллегой у него дома, и откровенно сказать, маясь со скуки, решили убить время тем. что бы наверстать слово «twitter», естественно используя border-radius.

Код можно ещё долго оптимизировать, уменьшить количество слоёв, почистить и оптимизировать стили, и так далее, и тому подобное + выстроить код и стили логично. Кстати, если извратиться, то можно сделать и кроссбраузерную версию этой верстки, но это на любителя, у меня такой цели не было. Тем более, это в разы усложнит вёрстку, или, если пойти иным путём, будет подвешивать нежные IE6 на скромных, по мощности, компьютерах.

Ну ещё. из общих проблем, есть проблемы с масштабированием, причём всё равно, в каких величинах верстать. Если будет время — решу проблему.

Ну а в действии посмотреть вы можете на этой странице — http://absolvo.ru/tmp/18/ — там и код, и стили — ну всё что надо в общем.

А может стоит сделать сервис, который будет генерировать такие буквы, наверстать пару шрифтов — будет симпатично и бестолково — зато может какому-нибудь маргиналу понравиться.