Нет-нет, я не буду вам показывать простые закруглённые прямоугольники, которые порядком приелись. Но те же самые простые закруглённые прямоугольники могут складываться во вполне осмысленные фигуры. У меня они сложились в слово «twitter».
Но перед тем как показывать кусок вёрстки, виновницы этой записи, хочу пожаловаться общественности на поведение браузеров, которое нельзя назвать достойным.
Все браузеры, в той или иной мере, дразнят нас теми свойствами, которые прямо сейчас использовать если и можно, то они не критичны. А критичные свойства CSS3 использоваться сейчас противопоказано, когда тот же border-radius не стесняются использовать многие, в том числе и я.
Я вполне понимаю, что CSS3 ещё не оформлено должным образом, и ругать браузеры за то, что они как хотят, так и вертят вызовом свойства border-radius, ну понятное дело, речь о -moz- и -webkit-. Ну а атрибуты свойства – так и вовсе рознятся, но тут всё более серьёзно упирается в неготовность спецификации CSS3.
И вот что непонятно, почему такая прогрессивная Opera не научила свой движок рендерить border-radius? Или я плохо искал, и что-то пропустил? Даже 10beta не рендерит – чем меня сильно расстроила.
Как вы думаете, стоит ли использовать некритичные для пользователей прелести CSS3, игнорируя тех, кто сидит на других браузерах, естественно, не в ущерб функционалу?
Ладно, хватит о теории, перейдём к практике. Пару дней назад, отдыхая с коллегой у него дома, и откровенно сказать, маясь со скуки, решили убить время тем. что бы наверстать слово «twitter», естественно используя border-radius.
Код можно ещё долго оптимизировать, уменьшить количество слоёв, почистить и оптимизировать стили, и так далее, и тому подобное + выстроить код и стили логично. Кстати, если извратиться, то можно сделать и кроссбраузерную версию этой верстки, но это на любителя, у меня такой цели не было. Тем более, это в разы усложнит вёрстку, или, если пойти иным путём, будет подвешивать нежные IE6 на скромных, по мощности, компьютерах.
Ну ещё. из общих проблем, есть проблемы с масштабированием, причём всё равно, в каких величинах верстать. Если будет время – решу проблему.
Итого, работает только в браузерах на движках Gecko и Webkit.
Выглядит так:
А вот так на других, не так симпатично, но читабельно:
Ну а в действии посмотреть вы можете на этой странице – http://absolvo.ru/tmp/18/ – там и код, и стили – ну всё что надо в общем.
А может стоит сделать сервис, который будет генерировать такие буквы, наверстать пару шрифтов – будет симпатично и бестолково – зато может какому-нибудь маргиналу понравиться.
PS – и интересно, можно ли с таким нынче модным словом и такой реализацией, пролезть в какой-нибудь интересный иностранный бложек? Наверное врядли ?
Да, кстати, в самом низу стилей, я вынес все классы, что бы скопом можно было изменить фон, или цвет букв.
CrashOver
Интересно придумал :) А на счёт использования в проектах CSS3, то это смотря на кого проект расчитан, если на технико-ориентированных людей (в простонародье — гиков), то конечно стоит использовать, они оценят, я думаю. А сервис можно и накидать, вполне забавная штука получится. А с ней и в бложек иностранный пролезть, есть в англоязычный твиттер этот сервис, как-нибудь пропихнуть умело :)