Демонстрация Свойства Border-Radius

Нет-нет, я не покажу вам простые скругленные прямоугольники, которые уже надоедают. Но те же простые прямоугольники со скругленными углами можно сложить во вполне осмысленные фигуры.

ты мне они образовали слово «твиттер».

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

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

А вот на других, не так красиво, но читабельно:

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

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

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

Ну атрибуты свойства совершенно разные, но это всё больше упирается в неготовность спецификации CSS3. И вот что непонятно, так это почему такая прогрессивная Опера не научила свой движок рендерить border-radius? Или я плохо искал и что-то пропустил? Даже 10beta не рендерит, что меня очень расстроило.

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

Пару дней назад, отдыхая с коллегой у него дома, и, честно говоря, от скуки, мы решили этим убить время.

чтобы заменить слово «twitter», естественно, используя border-radius. Код можно долго оптимизировать, уменьшая количество слоев, чистя и оптимизируя стили и тд и тп + выстраивать код и стили логически.

Кстати, если запутаться, то можно сделать кроссбраузерную версию этой верстки, но это на любителя, у меня не было такой цели.

Более того, это сильно усложнит разводку или, если пойти другим путем, повесит деликатный IE6 на скромных по мощности компьютерах.

Ну вот опять.

Из общих проблем есть проблемы с масштабированием, причем не важно, в каких значениях используется верстка.

Если у меня будет время, я решу проблему.

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

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

Теги: #css3 #border-radius #Gecko #WebKit #CSS