Метка «css» - 25

В данной статье хочу поделиться своим опытом в создании баннеров с помощью 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 показывается при отсутствии поддержки анимации со стороны браузера пользователя.

Читать полностью »