В данной статье хочу поделиться своим опытом в создании баннеров с помощью CSS3 свойств, которые получили поддержку почти во всех современных браузерах. Так необходимые для создания баннеров CSS3-свойства поддерживаются следующими версиями браузеров: Chrome 12, FF 10, IE 10, iOS 3.2, Android 3.2, Opera 12. Особую трудность здесь представляет еще слабая распространенность последней 10-й версии IE и лишь частичная поддержка анимационных возможностей в Опере (пока не поддерживаются 3D трансформации).
И так приступим к небольшой демонстрации простого создания баннера, состоящего из двух анимированных строк текста. Реализацию данного баннера можно посмотреть на сайте http://da4niku.ru.
Верста баннера имеет следующий вид:
<div id="banner_points">
<div id="banner_points_1">За каждый ежедневный визит на сайт</div>
<div id="banner_points_2">Вы получаете 1 очко голосования!</div>
<div id="banner_points_no">За ежедневный визит на сайт вы получаете 1 очко голосования!</div>
</div>
В общем контейнере banner_points находятся блоки строк banner_points_1 и banner_points_2, а banner_points_no показывается при отсутствии поддержки анимации со стороны браузера пользователя.
