Рисуем автобус с помощью CSS3

Ну вот и начинаем. Предыдущий пост был о том, что пора привыкать к благим новшествам CSS3. Сегодняшний пост нам наглядно продемонстрирует силу и удобство свойства border-radius.

Долгое время, для того, чтобы создать закругленные углы у бокса, верстальщикам приходилось идти на всяческие уловки. Но border-radius решил этот вопрос положительно раз и навсегда. С помощью этого свойства вы сможете задавать произвольный радиус закругления для вашего блока, вплоть до превращения его в круг. Кроме того, предусмотрены свойства, позволяющие закруглить любой из углов блока отдельно. Например, для верхнего правого угла используется свойство border-top-right-radius. Если для этого свойства будут заданы два числа, то граница будет эллиптической. Назначить данное свойство можно любому элементу за исключением таблицы, если у нее свойство border-collapse установлено в collapse. Подробнее о border-radius можно почитать на сайте W3C в рабочих записках по CSS3.

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

Да, я уже говорил, что не любитель изобретать велосипеды, автобусы, кстати, тоже 🙂 За автобус спасибо gozdeberberoglu.com.

Updated (27.02.09): Пример работает на данный момент в браузерах с поддержкой CSS3. На сто процентов верно для Firefox 3.x и Safari 3.x — 4 beta.

P.S.

Магазин он-лайн товаров — очень удобно. Кто скажет, что нет?

приворот без предоплаты — как вам? «Утром стулья — вечером деньги». Выгодно…