Простое создание баннеров на css3. Создание адаптивных HTML5 баннеров FullScreen

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

>

>
>
>

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

• Анимация - когда лодка скользит с левой стороны. Это применяется непосредственно к неупорядоченному списку (группа элементов лодки).
• Анимация - которая придает лодке эффект раскачивания, моделируя лодку плавающую по воде. Это применяется непосредственно к элементам списка (к лодке).
• Анимация - которая скрывает вопросительный знак. Это применяется к 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.

Благодаря развитию веб-технологий и современных браузеров, мы можем создавать множество эффектов без использования Javascript. Это значительно упростило жизнь веб-разработчикам. Ведь сейчас мы можем создавать эффекты на чистом CSS без использования Javascript. Поэтому в данной статье я хочу рассказать Вам о том, можно ли создавать баннеры на чистом CSS, что для этого потребуется, а также о минусах и плюсах данного подхода.

CSS3 дает большой спектр возможностей, ими лишь нужно правильно воспользоваться. В качестве примера хочу привести ссылки на мои прошлые работы "Персонажи на чистом CSS":

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

По поводу демо: у каждого примера (баннера) внизу присутствует длительность в секундах, а также кнопка "Обновить", которая начинает показ баннера сначала.

Баннер #1 — "Индивидуальное обучение сайтостроению" :

Данный баннер я создавал около 2-х дней. Почему так долго? Потому что для адаптации баннера (чтобы сделать его резиновым) ушло некоторое время при пересчете координат. Сейчас его размер зависит от ширины блока-родителя (в котором находится сам баннер CSS).

Этот баннер я создал буквально за 2-2.5 часа. Единственное, что здесь тормозило процесс создания — это выбор иконок. Потому что их необходимо было подобрать близкими по тематике баннера.

Данный баннер также растягивается в зависимости от ширина контейнера блока, в котором он находится. На его создание ушло примерно 1.5 часа.

Смотрятся такие баннеры очень красиво, но всё ли так просто? Давайте посмотрим на плюсы и минусы такого способа создания баннеров.

Преимущества и недостатки CSS баннеров:

Как создать баннер CSS?

1 Идея

Для начала необходимо точно знать какая анимация должна быть у баннера (что, куда и откуда должно двигаться и где появляться). Вы можете взять лист А4 и прорисовать куда будет двигаться каждый элемент и что на баннере должно быть.

Ведь нельзя начать создавать баннер, если Вы не знаете что он из себя должен представлять и как функционировать.

2 HTML структура

Следующим шагом необходимо создать HTML разметку таким образом, чтобы элементы можно было перемещать (и создавать для них анимацию). То есть нельзя сделать всё одним изображением, которое будет выезжать справа или слева и на этом анимация закончена.

Как правило есть один общий блок, в котором находятся все остальные. И в этом общем блоке мы можем управлять элементами как нам это необходимо.

3 CSS анимация

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

Чтобы создать свой баннер, Вам необходимо хорошо владеть основами CSS и HTML.

Изучите базовую анимацию на CSS с помощью данного урока — .

Вывод

Все современные браузеры поддерживают CSS3 свойства, а, значит, и баннеры будут корректно отображаться в таких браузерах. Но с помощью JS плагинов можно создать баннеры CSS и для старых браузеров. Изучив основы анимации CSS, Вы поймете процесс создания баннеров и вскоре создадите свой первый баннер на чистом CSS! 😉

Привет, значит задача стоит такая: «Создать адаптивный HTML баннер, который будет подстраиваться под различные размеры экрана, у него будет счётчик оставшегося времени и кнопка закрыть и всё это должно ещё и клики считать, чтобы собирать статистику о переходах по ТТ Adriver».

Сначала разберёмся, какие собственно самые востребованные форматы есть при создании таких баннеров:

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

1. FullScreen баннеры — баннеры, которые вы могли видеть в метро или на сайте wifi , данные баннеры раскрываются на весь экран, имеют счётчик и кнопку закрытия. Для создания таких баннеров мы просто подготавливаем статичную картинку или простую gif анимацию(не более 600КБ) и далее верстаем всё на HTML.

   FullScreen Баннер

2. FullWidth баннеры — уже интереснее, но на самом деле это просто обычный HTML5 баннер, только растягивающийся на 100% ширины экрана, но имеющий при этом фиксированную высоту. В таких баннерах часто используется анимация и они уже создаются в таких программах, как google web designer , Adobe Edge Animate , Adobe Animate CC . Лично я активно юзаю Edge Animate, он удобнее, быстрее и есть возможность быстрой выгрузки в HTML5. При создании таких баннеров, изначально делается раскадровка с вариантами того, как этот баннер будет выглядеть при разных размерах экрана, выглядит всё это дело примерно так:

   

   Раскадровка баннера на 100% ширины

3. Баннер с фиксированным размером или статичный — ну это совсем просто. Тут создаётся просто креатив или раскадровка и всё, что остаётся сделать — это прописать код для счёта кликов. Для создания таких баннеров я часто использую Adobe Photoshop или Edge Animate — если это анмиация. Никогда не используйте тут GIF! Вы никогда не сможете выгрузить gif анимацию в размере до 600КБ, а если анимация весит больше, то её не пропустят. Обычный HTML баннер не дотянет по весу и до 200КБ, а значит, что тут можно творить по полной.



Раскадровка баннера с фиксированными размерами

Гайд по созданию FullScreen баннера по всем правилам

Создание такого баннера подразумевает, что его размер будет изменяться при измении размера экрана, а значит он будет занимать всю его площадь, примерно так:

Это значит, что изображение должно одианово хорошо смотреться на всех устройствах, от сюда вывод, что оно должно быть достаточно хорошего качества и размер приближен к квадрату (фиксированных размеров нет, тут всё довольно лояльно). В даный момент мы оринтируемся на мобильнуе устройства(mobile) и планшеты(tablet), потому берём прямоугольник, для просмотра в портретном режиме(portrait). Заходим в Photoshop и создаём документ необходимого размера, в данном случае это 536х714 :



Gif исходник для создания FullScreen баннера

Я создал гифку из двух кадров, вес у неё 242КБ, вес у нас всегда должен быть до 600КБ, помним это. Теперь нам необходимо превратить это в собственно баннер на HTML. Открываем инструкцию по созданию FullScreen баннеров , берём из неё технические требования и закрываем, она написана очень коряво. Забудьте про Flash, он пал смертью храбрых, у нас только HTML5, потому нам нужны технические требования для создания баннеров на коде Ajax.

Ограничений по вёрстке нет, тут мы вольны творить всё, что нам вздумается, главное, чтобы присутствовали основные атрибуты, а именно: Читался клик с баннера, был счётчик и крестик для закрытия. Для коддинга я использую бесплатную программ Sublime Text .

Открываем HTML файл из моего шаблона и видим:



Стандартный код баннера FullScreen






Кнопка закрыть

Как же читается сам клик с баннера? И почему мы не прописывали ниаких ссылок на страницы, на которые должен вести баннер? Так вот… Система Adriver позволяет прописывать ссылки для перехода на сайт, после загрузки баннеров в систему, получается у нас в исходнике мы лишь прописываем переменную, которая заменяется при загрузке в систему сама, уже не наша работа. В данном случае у нас клик прописывается для всего контейнера, в котором находится наш баннер, в общем всё, что мы помещаяем в

у нас является баннером и с этого считываются клики. Для других баннеров, другие технические тредования и там клик считывается по-другому, сечас мы рассматриваем конкретный пример.

Контейнер с баннером

В других уроках я расскажу, как создать баннер на 100% ширины экрана с анимацией и как по всем правилам создать и подготовить макет для вёрстки сайта.

Файлы из урока:

1. Готовые баннеры FullScreen: клик

Спасибо за внимание.

Несомненно, одним из самых ярких трендов 2012 является разработка на CCS3 , HTML5. Сегодня мы предлагаем большой и очень полезный обзор примеров «20+: креативные и полезные уроки на CSS3″ , предложенных на SpeckyBoy . Все примеры сделаны на чистом без JavaScript , в представленных уроках есть демо и готовые файлы CSS3 для скачивания.

Уверены, что данные приемы и техники будут полезны для веб-разработчиков!

Уроки css3 :

1. CSS3 фотогалереи, слайдеры, эффекты с изображениями

1.1.Слайдер на CSS3

Не верится, но данный слайдер с разными эффектами сделан исключительно на CSS3, очень эффектно.

1.2. Фон для сайта на полный экран с эффектом слайдера на CSS3

Веб-дизайнеры уже давно экспериментируют с различными фонами для сайта, но до сих пор на чистом CSS можно было сделать очень мало, приходилось использовать JS. Теперь CSS3 дает возможность поступить с фоном вашего сайта как вы пожелаете — можно один фон с большой качественной фотографией, можно менять несколько фонов с разными эффектами, причем с маштабируемостью фона в зависимости от параметров экрана. Вообщем, потрясающая возможность для креативных сайтов.

1.3. Лайтбокс на CSS3

С помощью этого урока можно научиться создавать лайтбокс (Lightbox) с разнообразными эффектами на чистом CSS.

1.4. Свойства изображения на CSS3

Данный урок демонстирует новые возможности на CSS3 для свойств изображений, таки как закругленные уголки, тени и прочие эффекты.

1.5. Анимированный баннер на CSS3

1.6.Панель загрузки на CSS3

1.7. 3D лента на CSS3



Просмотреть демо или скачать файлы CSS3 кода →

2. CSS3 меню, навигация и кнопки

2.1. Меню Apple.com на CSS3

Урок для создания знаменитого меню Apple.com на CSS3.

2.2. Анимированное горизонтальное меню на CSS3

Простой урок, который показывает как сделать анимированное меню на CSS3 с разными эффектами.

2.3. Анимированное вертикальное меню на CSS3

2.4. Анимированные кнопки на CSS3

Отличный урок с 7 примерами анимированных креативных кнопок.

2.5. Креативное анимированное меню с изображениями на CSS3

В данном уроке просто глаза разбегаются от представленных 10 примеров. Такие непростые креативные меню раньше создавались исключительно с помощью JS. Впечатляет!

2.6. Circle Navigation Effect with CSS3

Необычный эффект при наведении на выбранный пункт навигации в виде круга с изображением. Берем на заметку!

2.7. Выпадающее меню на CSS3

Урок для реализации простого выпадающего меню с подуровнями на CSS3.

2.8. CSS3 навигация с анимированными переходами

3. Разные эффекты на CSS3

3.1. Анимированная всплывающая подсказка (tooltip) на CSS3 без jQuery