Для того чтобы понять структуру нашей разметки, давайте сосредоточимся на лодке на секунду:

>

>
>
>

Теперь, посмотрим на первый баннер на демонстрационной странице . Там есть три отдельных анимации, которые происходят на корабле:

• Анимация - когда лодка скользит с левой стороны. Это применяется непосредственно к неупорядоченному списку (группа элементов лодки).
• Анимация - которая придает лодке эффект раскачивания, моделируя лодку плавающую по воде. Это применяется непосредственно к элементам списка (к лодке).
• Анимация - которая скрывает вопросительный знак. Это применяется к div-у (question-mark).

Если вы не страдаете морской болезнью, то еще раз гляньте на демо-страницу . Вы увидите, что анимация которая применяется к элементу списка (лодке), заставляя лодку приподниматься, также влияет на DIV внутри него (со знаком вопроса). Кроме того, "slide in" анимация, которая применяется к неупорядоченному списку (группе), также влияет на элемент списка и DIV внутри него (на лодку и вопросительный знак). Это приводит нас к важным наблюдениям:

Дочерние элементы наследуют анимацию от своих родителей, в дополнение к их собственной анимации. Эти знания добавлены в наш арсенал, но число дочерних/родительских элементов при создании анимации взорвут ваш мозг (и процессор на ноутбуке вашей бабушки)!

CSS

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

Резервные стили для старых браузеров


Мы просто создадим резервные стили как если бы CSS-анимации не существовало (мысль о том, что CSS анимация не существует заставит любого взрослого человека не только плакать, но повесить радом со мной:)). Другими словами, если наша анимация не в состоянии проигрываться, баннер все равно должен выглядеть достойно. Таким образом, когда кто-то просматривает баннер при помощи старого браузера, они увидят нормальный, статический баннер, вместо пустого места.

Например: если кто-то использует CSS вроде этого, будут проблемы:

/* НЕПРАВИЛЬНЫЙ СПОСОБ! */


0% { opacity: 0 ; }
100% { opacity: 1 ; }
}

Div {
opacity: 0 ; /* Этот блок спрятан по-умолчанию!*/

}

Если браузер пользователя не поддерживает анимацию, баннер будет оставаться невидимым для него. И тогда клиент сломает дверь в офисе продавца - с бензопилой в руках - и потребует, чтобы ему объяснили, почему они не продали его товар! И если они не в состоянии понять, что браузер может быть настолько жалким, их жизнь закончится ужасно, и последними словами их будут проклятия в адрес Internet Explorer ... :)

Но не волнуйтесь, мы предоставим расширенную поддержку браузеров:

/* ПРАВИЛЬНЫЙ СПОСОБ */

@keyframe our-fade-in-animation {
0% { opacity: 0 ; }
100% { opacity: 1 ; }
}

Div {
opacity: 1 ; /* этот div будет виден по-умолчанию */
animation: our-fade-in-animation 1s 1 ;
}

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

Теперь, когда мы знаем, как сделать наши анимированные баннеры с поддержкой старых браузеров, давайте перейдем к основному CSS.

Есть три ключевые вещи, которые нужно иметь в виду:

• Поскольку эти объявления могут быть использованы на различных веб-сайтах, мы сделаем все наши CSS-стили очень специфичными . Мы будем начинать объявление каждого селектора с id: #ad-1. Это позволит оградить наши стили баннера от вмешательства существующих стилей и элементов.
• Мы будем целенаправленно игнорировать функцию задержки анимации при создании нашей анимации. Если бы мы использовали функцию задержки анимации, а также дизайн для наших элементов правильным способом (видимым по умолчанию), все это было видно на экране прежде чем анимация, наконец, начала бы играть. Именно поэтому анимация начинается немедленно, что позволяет скрывать элементы с экрана, до тех пор пока они не будут нам нужны. Мы будем моделировать задержку анимации за счет увеличения продолжительности и ручной настройки ключевых кадров. Вы увидите примеры этого, когда мы начинаем создавать анимацию.
• По возможности, используйте одну анимацию для нескольких элементов . Таким образом, мы можем сэкономить много времени и сократить разрастание кода. Вы можете создать несколько различных эффектов, в одной и той же анимации, регулируя продолжительность и переходы.

Итак, мы начнем создание нашего рекламного баннера. Давайте убедимся, что он имеет относительное расположение (position: relative), чтобы внутри него элементы могли быть размещены правильно. Мы также должны убедиться, что установлено свойство overflow: hidden , чтобы скрывать всё лишнее:

#ad-1 {
width : 720px ;
height : 300px ;
float : left ;
margin : 40px auto 0 ;
background-image : url (../images/ad-1/background.png ) ;
background-position : center ;
background-repeat : no-repeat ;
overflow : hidden ;
position : relative ;
box-shadow: 0px 0px 6px #000 ;
}

#ad-1 #content {
width : 325px ;
float : right ;
margin : 40px ;
text-align : center ;
z-index : 4 ;
position : relative ;
overflow : visible ;
}
#ad-1 h2 {
font-family : "Alfa Slab One" , cursive ;
color : #137dd5 ;
font-size : 50px ;
line-height : 50px ;

animation: delayed-fade-animation 7s 1 ease-in-out; /* H2 будет исчезать с симуляцией задержки анимации */
}
#ad-1 h3 {

color : #202224 ;
font-size : 31px ;
line-height : 31px ;
text-shadow : 0px 0px 4px #fff ;
animation: delayed-fade-animation 10s 1 ease-in-out; /* H3 будет исчезать с симуляцией задержки анимации */
}
#ad-1 form {
margin : 30px 0 0 6px ;
position : relative ;
animation: form-animation 12s 1 ease-in-out; /* Этот код перемещает нашу форму с email-ом */
}
#ad-1 #email {
width : 158px ;
height : 48px ;
float : left ;
padding : 0 20px ;
font-size : 16px ;
font-family : "Lucida Grande" , sans-serif ;
color : #fff ;
text-shadow : 1px 1px 0px #a2917d ;
border-top-left-radius: 5px ;
border-bottom-left-radius: 5px ;
border : 1px solid #a2917d ;
outline : none ;
box-shadow: -1px -1px 1px #fff ;
background-color : #c7b29b ;
background-image : linear-gradient(bottom , rgb (216 , 201 , 185 ) 0% , rgb (199 , 178 , 155 ) 100% ) ;
}
#ad-1 #email :focus {
background-image : linear-gradient(bottom , rgb (199 , 178 , 155 ) 0% , rgb (199 , 178 , 155 ) 100% ) ;

}
#ad-1 #submit {
height : 50px ;
float : left ;
cursor : pointer ;
padding : 0 20px ;
font-size : 20px ;
font-family : "Boogaloo" , cursive ;
color : #137dd5 ;
text-shadow : 1px 1px 0px #fff ;
border-top-right-radius: 5px ;
border-bottom-right-radius: 5px ;
border : 1px solid #bcc0c4 ;
border-left : none ;
background-color : #fff ;
background-image : linear-gradient(bottom , rgb (245 , 247 , 249 ) 0% , rgb (255 , 255 , 255 ) 100% ) ;
}
#ad-1 #submit :hover {
background-image : linear-gradient(bottom , rgb (255 , 255 , 255 ) 0% , rgb (255 , 255 , 255 ) 100% ) ;
}

Теперь мы создадим стили для воды и вызовим соответствующую анимацию:

#ad-1 ul#water {
/* Если бы мы хотели добавить другую анимацию для воды (перемещение по горизонтали, например), мы могли бы сделать это здесь */
}
#ad-1 li#water-back {
width : 1200px ;
height : 84px ;
background-image : url (../images/ad-1/water-back.png ) ;

z-index : 1 ;
position : absolute ;
bottom : 10px ;
left : -20px ;
animation: water-back-animation 3s infinite ease-in-out; /* Эффект подпрыгивания воды */
}
#ad-1 li#water-front {
width : 1200px ;
height : 158px ;
background-image : url (../images/ad-1/water-front.png ) ;
background-repeat : repeat-x ;
z-index : 3 ;
position : absolute ;
bottom : -70px ;
left : -30px ;
animation: water-front-animation 2s infinite ease-in-out; /* Другой эффект подпрыгивания воды - он немного отличается. Мы сделаем эту анимацию немного быстрее, чтобы создать какую-то перспективу. */
}

Теперь создадим стили для лодки и всех ее элементов. Опять же, мы будем вызывать соответствующую анимацию:

#ad-1 ul#boat {
width : 249px ;
height : 215px ;
z-index : 2 ;
position : absolute ;
bottom : 25px ;
left : 20px ;
overflow : visible ;
animation: boat-in-animation 3s 1 ease-out; /* Перемещение группы вначале */
}
#ad-1 ul#boat li {
width : 249px ;
height : 215px ;
background-image : url (../images/ad-1/boat.png ) ;
position : absolute ;
bottom : 0px ;
left : 0px ;
overflow : visible ;
animation: boat-animation 2s infinite ease-in-out; /* Имитация лодки покачивающейся на воде - похожая анимации уже используется для самой воды. */
}
#ad-1 #question-mark {
width : 24px ;
height : 50px ;
background-image : url (../images/ad-1/question-mark.png ) ;
position : absolute ;
right : 34px ;
top : -30px ;
animation: delayed-fade-animation 4s 1 ease-in-out; /* Прячем вопросительный знак */
}

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



Вот эти стили:

#ad-1 #clouds {
position : absolute ;
top : 0px ;
z-index : 0 ;
animation: cloud-animation 30s infinite linear; /* Перемещение облаков влево, бесконечное количество раз */
}
#ad-1 #cloud-group-1 {
width : 720px ;
position : absolute ;
left : 0px ;
}
#ad-1 #cloud-group-2 {
width : 720px ;
position : absolute ;
left : 720px ;
}
#ad-1 .cloud-1 {
width : 172px ;
height : 121px ;
background-image : url (../images/ad-1 /cloud-1 .png) ;
position : absolute ;
top : 10px ;
left : 40px ;
}
#ad-1 .cloud-2 {
width : 121px ;
height : 75px ;
background-image : url (../images/ad-1 /cloud-2 .png) ;
position : absolute ;
top : -25px ;
left : 300px ;
}
#ad-1 .cloud-3 {
width : 132px ;
height : 105px ;
background-image : url (../images/ad-1 /cloud-3 .png) ;
position : absolute ;
top : -5px ;
left : 530px ;
}

Уффф! Тут было много CSS-кода. Но самое интересное дальше!

Анимация


Помните: До этого момента, никакой, собственно, анимации не было. Если бы вы просмотрели баннер сейчас, вы бы увидели то, что будет показывать даже старый браузер - статическое объявление. С ейчас мы фактически создадим анимацию, которую мы уже вызвали в нашем CSS-коде.

Теперь, когда наш баннер отображается хорошо, давайте оживим это статическое объявление! Перейдем прямо к коду - я расскажу вам в комментариях, что будет происходить:

Заключение

В ходе этого урока, мы узнали ключевые моменты создания анимации, с поддержкой старых браузеров:

1. Дочерние элементы наследуют анимацию своих родителей в дополнение к их собственной анимации. Мы можем использовать это для создания более сложной анимации.
2. Для стилей нашей рекламы мы должны использовать очень специфичные селекторы, чтобы наши объявления не были переопределены другими стилями сайта.
3. Необходимо задавать такие стили для элементов, что если наша анимация не в состоянии проигрываться, то объявление все равно должно прилично выглядеть.
4. Когда это возможно, использовать одну анимацию для нескольких элементов - экономим время и препятствуем разрастанию кода.
5. Часто ссылаемся на Internet Explorer, как на "браузер 18-го века" и при этом с отвращением и гневом трясем кулаком. :)

Удачи в ваших экспериментах с CSS.

Сделаем рекламный баннер с помощью CSS3. В настоящее время полностью поддерживают анимации CSS3 только браузеры Firefox и WebKit. Но достаточно просто заставить баннер работать в других браузерах. Однако, не следует ожидать великолепного функционирования везде (особенно в IE 7 и старше) экспериментов с новейшими техниками CSS.

Примечание: Для сохранения пространства на странице все префиксы производителей браузеров опущены. Смотрите код в исходниках.

Разметка HTML

Сначала рассмотрим структуру баннера в HTML. На данном этапе мы должны представить, как будет функционировать анимация:

Потерялся?

Расслабься - мы поможем.



Для более глубокого понимания структуры разметки сфокусируемся на лодке:

С лодкой происходят три анимации:

Выскальзывание лодки слева. Применяется для неупорядоченного списка (группа).

Имитация раскачивания лодки на воде. Применяется к элементу списка (лодка).

Появление знака вопроса. Применяется к элементу div (знак вопроса).

Если посмотреть на демонстрационную страницу, то можно увидеть, что анимация для пункта списка (лодки) также действует на элемент div внутри него (Знак вопроса). Также анимация "выскальзывания" для неупорядоченного списка действует на пункт списка (лодку и знак вопроса).

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

CSS

Прежде, чем начинать разбор создания анимации, нужно обеспечить обратную совместимость со старыми браузерами.

Обратная совместимость

Мы обеспечим обратную совместимость просто задав стили разметки так, как будто анимаций CSS не существует совсем. Если кто-то будет смотреть страницу в старом браузере, то увидит обычную статичную картинку, а не пустое белое место.

Например: если использовать CSS? подобный ниже приведенному, то будут проблемы:

/* НЕПРАВИЛЬНО! */ @keyframe our-fade-in-animation { 0% {opacity:0;} 100% {opacity:1;} } div { opacity: 0; /* Данный div скрыт по умолчанию - ой!*/ animation: our-fade-in-animation 1s 1; }

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

А вот так мы обеспечим обратную совместимость со старыми браузерами:

/* ВЕРНО */ @keyframe our-fade-in-animation { 0% {opacity:0;} 100% {opacity:1;} } div { opacity: 1; /* Данный div видим по умолчанию */ animation: our-fade-in-animation 1s 1; }

Теперь элемент div будет выводиться даже если анимация не может запуститься. А в современных браузерах div будет сначала скрыт в ходе анимации.

Основа

Теперь мы знаем как обеспечить обратную совместимость (что поможет избежать проблем при работе с реальными проектами). Пришла пора создать основу нашего кода CSS.

Нужно помнить о 3 моментах:

Так как баннер будет использоваться на разных сайтах, мы сделаем все наши селекторы CSS особенными. Все они будут начинаться с идентификатора #ad-1. Таким образом мы постараемся избежать перекрытия нашего кода и кода сайта.

Мы намерено игнорируем задержку анимации в установках. Если использовать задержку анимации при задании стилей с видимостью элементов по умолчанию, то структура баннера будет нарушаться внезапным исчезновением или появлением частей картинки после завершения анимации. Задержка анимации имитируется длительностью и настройкой кадров.

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

Итак создаем основу для нашего баннера. Установим для нее относительное позиционирование чтобы внутренние элементы можно было корректно размещать. Также будет скрывать все, что выходит за рамки элемента:

#ad-1 { width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background-repeat: no-repeat; overflow: hidden; position: relative; box-shadow: 0px 0px 6px #000; }

Затем задаем стили для текста и полей ввода. Вызываем соответствующие анимации. Также нужно убедиться, что содержание имеет наивысший z-index для движущихся частей, чтобы они не перекрывались:

#ad-1 #content { width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible; } #ad-1 h2 { font-family: "Alfa Slab One", cursive; color: #137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 7s 1 ease-in-out; /* Появление h2 с имитацией задержки */ } #ad-1 h3 { font-family: "Boogaloo", cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 ease-in-out; /* Появление h3 с имитацией задержки */ } #ad-1 form { margin: 30px 0 0 6px; position: relative; animation: form-animation 12s 1 ease-in-out; /* Выскальзывание формы для ввода email адреса с имитацией задержки */ } #ad-1 #email { width: 158px; height: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border:1px solid #a2917d; outline: none; box-shadow: -1px -1px 1px #fff; background-color: #c7b29b; background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); } #ad-1 #email:focus { background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); } #ad-1 #submit { height: 50px; float: left; cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", cursive; color: #137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%); } #ad-1 #submit:hover { background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); }

Теперь зададим стили для воды и вызовем соответствующую анимацию:

#ad-1 ul#water{ /* Если нужна другая анимация для воды, ее можно добавить здесь */ } #ad-1 li#water-back { width: 1200px; height: 84px; background-image: url(../images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px; animation: water-back-animation 3s infinite ease-in-out; /* Имитация плеска волн */ } #ad-1 li#water-front { width: 1200px; height: 158px; background-image: url(../images/ad-1/water-front.png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left:-30px; animation: water-front-animation 2s infinite ease-in-out; /* Другая имитация плеска волн. Анимация будет выполняться немного быстрее для создания эффекта перспективы. */ }

Зададим стили для лодки и её элементов. Также вызываем соответствующие анимации:

#ad-1 ul#boat { width: 249px; height: 215px; z-index: 2; position: absolute; bottom: 25px; left: 20px; overflow: visible; animation: boat-in-animation 3s 1 ease-out; /* Slides the group in when ad starts */ } #ad-1 ul#boat li { width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */ } #ad-1 #question-mark { width: 24px; height: 50px; background-image: url(../images/ad-1/question-mark.png); position: absolute; right: 34px; top: -30px; animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */ }

Теперь создадим стили для облаков. Для них мы будем использовать анимацию с эффектом бесконечного движения. иллюстрация демонстрирует суть идеи:



А вот и код CSS:

#ad-1 #clouds { position: absolute; top: 0px; z-index: 0; animation: cloud-animation 30s infinite linear; /* Прокручиваем облака влево, сбрасываем и повторяем */ } #ad-1 #cloud-group-1 { width:720px; position: absolute; left:0px; } #ad-1 #cloud-group-2 { width: 720px; position: absolute; left: 720px; } #ad-1 .cloud-1 { width: 172px; height: 121px; background-image: url(../images/ad-1/cloud-1.png); position: absolute; top: 10px; left: 40px; } #ad-1 .cloud-2 { width: 121px; height: 75px; background-image: url(../images/ad-1/cloud-2.png); position: absolute; top: -25px; left: 300px; } #ad-1 .cloud-3 { width: 132px; height: 105px; background-image: url(../images/ad-1/cloud-3.png); position: absolute; top: -5px; left: 530px; }

Анимации

Напоминание: Начиная с данной точки ничего в действительности не анимируется. Если посмотреть наш баннер сейчас, то вы увидите статичную картинку. Здесь создаются анимации, которые вызываются в выше приведенном коде.

Теперь в вдохнем жизнь в нашу прекрасную статичную картинку:

/* Анимация с имитацией задержки используется для вывода нескольких элементов. Имитация задержки осуществляется запуском процесса с 80% продолжения анимации (а не сразу). Так можно имитировать любую задержку: */ @keyframes delayed-fade-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } /* Анимация для вывода формы с адресом email и кнопкой. Также используется имитация зхадержки */ @keyframes form-animation { 0% {opacity: 0; right: -400px;} 90% {opacity: 0; right: -400px;} 95% {opacity: 0.5; right: 20px;} 100% {opacity: 1; right: 0px;} } /* Данная анимация используется для вывода лодки за экрана в начале ролика: */ @keyframes boat-in-animation { 0% {left: -200px;} 100% {left: 20px;} } /* Анимация для облаков. Первая группа облаков начинает движение из центра, а вторая - справа от экрана. Первая группа медленно выводится с экрана, а вторая - появляется справа. Как только левая группа полностью скроется, облака очень быстро возвращаются в начальное положение: */ @keyframes cloud-animation { 0% {left: 0px;} 99.9999% {left: -720px;} 100% {left: 0px;} } /* Три последних анимации практически одинаковые - разница заключается в позиционировании элементов. Они имитируют плеск волн океана: */ @keyframes boat-animation { 0% {bottom: 0px; left: 0px;} 25% {bottom: -2px; left: -2px;} 70% {bottom: 2px; left: -4px;} 100% {bottom: -1px; left: 0px;} } @keyframes water-back-animation { 0% {bottom: 10px; left: -20px;} 25% {bottom: 8px; left: -22px;} 70% {bottom: 12px; left: -24px;} 100% {bottom: 9px; left: -20px;} } @keyframes water-front-animation { 0% {bottom: -70px; left: -30px;} 25% {bottom: -68px; left: -32px;} 70% {bottom: -72px; left: -34px;} 100% {bottom: -69px; left: -30px;} }

Заключение

В ходе данного урока мы изучили несколько ключевых концепций:

1. Элементы наследники получают анимации своих родителей в дополнение к своим анимациям.
2. При создании баннера надо стремиться использовать уникальный идентификатор, чтобы избежать перекрытия кода с существующим проектом CSS.
3. Положение и стиль элементов нужно выбирать так, как будто анимация не доступна, чтобы обеспечить обратную совместимость.
4. По возможность нужно использовать одну анимацию для нескольких элементов.

Адаптивный веб-дизайн - значительное достижение для всего Интернета. Мы больше не скованы давно устаревшей моделью «печатной страницы» со статическим содержимым, разбитым на области фиксированного размера. Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов - и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.

Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как flash-, так и GIF-баннеры имеют фиксированные размеры, из-за чего несовместимы с современной адаптивной вёрсткой. Нам необходим новый метод создания баннерной рекламы. Нам нужны «адаптивные» баннеры…


Новый формат баннеров

Единственный способ сделать баннер таким же гибким, как и наша -разметка - написать его на HTML5. Вначале это может показаться бредовой идеей, но я уверяю вас - это не так. В действительности, у такого подхода есть множество преимуществ:

• HTML-реклама доступна повсеместно , а семантическая разметка сделает её подходящей дляскрин-ридеров ;
• текст, изображения, видео, скрипты и формы - всё это может быть использовано в баннере точно так же, как и на любой веб-странице;
• при необходимости баннеры могут задействовать динамические сценарии и базы данных на серверной стороне ;
• в баннер могут быть внесены изменения уже после его размещения ;
• файл (набор файлов) HTML-баннера может иметь весьма скромный размер ;
• banner serving , по существу, сводится к веб-хостингу ;
• веб-разработчикам не нужно изучать что-либо новое - все технологии остаются теми же, что и при обычной веб-разработке;
• и, конечно, при помощи CSS3 медиа-запросов можно заставить HTML5-рекламу «подстраиваться» под любые размеры - ведь именно такое поведение мы ожидаем от адаптивных баннеров!

Как же этого достичь?

Во-первых, баннер создается как резиновая HTML5-страница. Мы наполняем её текстом, изображениями, ссылками на требуемую страницу, украшая всё это при помощи CSS3. Во-вторых, такой баннер может быть размещен на любом веб-сайте посредством плавающего фрейма iframe. Есть одна хитрость, задействующая CSS3 медиа-запросы чтобы сделать динамическими размерности iframe’а, и вскоре я расскажу о ней… Однако, по большому счёту, это всё!