Простое создание баннеров на css3. Создание адаптивных HTML5 баннеров 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

Друзья, всем привет. Сегодня продолжим создавать баннеры в программе Google Web Designer в формате HTML5, с эффектом 3D.

И это понятно, баннеры, созданные на html5 и css3, отображаются на любых экранах как на компьютере, телевизорах, так и на мобильных устройствах. Чего не скажешь о flash-баннерах.

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

А учитывая тот факт, что мобильные устройства всё больше используются для просмотра интернет ресурсов, то — это очень важно.

Основной и размещение его на сайте я уже рассказал в прошлой статье. Так что сегодня уделю внимание созданию эффекта 3D и настройкам цикличности (повторного показа). А также рассмотрим несколько настроек для «событий».

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

Подготовка к созданию баннера с эффектом 3D.

От подготовки в конечном итоге зависит вид баннера в готовом виде. Редактор Google Web Designer позволяет создавать реалистичные 3D эффекты и всё это будет прописано в html коде, вам лишь нужно всё правильно собрать в визуальном редакторе.

Для создания качественного 3D эффекта нужно предварительно нарезать в фотошопе заготовки, которые в дальнейшем нужно будет состыковать в Google Web Designer.

В качестве примера я подготовил вот такие заготовки:

Эти заготовки я сделал в Photoshop, но подобных изображений много в интернете. Можно и не напрягаться, а взять готовые варианты.

Примечание: Если вам интересен процесс создания подобных заготовок, напишите об этом в комментариях.

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

Создание 3D объекта в Google Web Designer.

Итак, по аналогии с прошлой статьёй, запускаете редактор, создаёте новый проект.

Эффект 3D подразумевает под собой составное изображение, то есть изображение, состоящее из нескольких кусочков, расположенных в нужной проекции.

Эти несколько изображений нужно объединить либо в группу, либо поместить в блок DIV. И так и так будет правильно. Но, мне удобней работать с боком ДИВ.

Шаг 1. Создание блока DIV.

Итак, для создания блока ДИВ, в левой панели выбираете «Инструмент работы с тегами (D)» .

Обязательно присвойте идентификатор. И подгоните размеры с помощью раздела «Свойства» в правой панели.

Теперь нужно выделить блок. Для этого в левой панели выбираете «инструмент выделение (V)» и двойным щелчком левой кнопки мышки кликнете по рамке блока ДИВ. Она при этом сменит цвет на красный.

Шаг 2. Выстраивание изображений.

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

В моём распоряжении есть следующие элементы:

— Верхняя сторона.

— Боковая сторона (состоит из трёх отдельных частей).

Для начала размещаем оборотную (заднюю) сторону изображения и выравниваем её по центру и верхнему краю баннера.

Таким же образом добавляем лицевую сторону. Выравниваем и смещаем по оси Z.

Так как ширина боковой стороны 4px (пикселя), то лицевую и оборотную стороны я сместил по оси Z на 2px и -2px. Что обеспечит зазор между изображениями.

Примечание: точные цифры смещений смотрите на скриншотах.

Далее, добавляем боковую сторону, все части по отдельности. Для удобства размещения используйте инструменты «3 D вращение рабочей области» и «Масштаб» . Они помогут точно подогнать все детали.

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

Следующим шагом выстраиваем верхний левый уголок.

Теперь центральная часть боковой стороны.

И нижний уголок по левой стороне.

Все элементы боковой стороны обязательно выравнивайте по оси Y на 90 0 .

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

Для этого в нижней панели выбираете изображение – нажимаете комбинацию клавиш CTRL+С (копирование) и вставляете дубликат CTRL+V.

Начнём так же, как и полевой стороне сверху вниз, но только для правой.

Верхняя правая крышечка.

Нижнюю часть я не стал делать, так как её не видно на изображении.

Самая тяжёлая работа закончена. Теперь можно приступить к настройке анимации. В качестве наглядной демонстрации сделаем вращение изображения.

Создание эффекта вращения в Google Web Designer.

Первым делом нужно выйти из блока ДИВ, в котором находятся все элементы изображения. То есть мы работали внутри блока с конкретными изображениями, а теперь нужно будет работать со всеми изображениями одновременно, управляя блоком ДИВ.

Для начала нажимаете на кнопку DIV в нижней панели.

Итак, на шале времени нажав правую кнопку мышки, создаёте два ключевых кадра. Должно получиться так:

Расположение исходного кадра по шкале Y выставляем на -90 0 .

Первый ключевой кадр (второй по счёту) выставляем по шкале Y на 0 0 .

Второй ключевой кадр (третий по счёту) выставляем по шкале Y на 90 0 .

Всё можно проверять результат. Для этого нажимаете на кнопку Play .

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

Настройка цикличности в Google Web Designer.

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

Также цикличность можно ограничить числом повторов или сделать её бесконечной.

На нижней панели, рядом с каждым элементом есть символы «Замок», «Глаз», «Обратная стрелка» .

Так вот, для настройки цикличности нужно нажать на символ «Обратная стрелка». И выбрать либо ограниченное количество повторов, либо бесконечный вариант.

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

Остановка вращения при наведении курсора мышки на баннер.

Первым делом на первом ключевом кадр (второй по счёту) устанавливаем ярлык. Для этого над кадром нажмите правую кнопку мышки и выберите пункт меню «Добавить ярлык» . Вводите название ярлыка и жмёте клавишу Enter.

А на следующем шаге выбираете в качестве приёмника « Page1» . Других там вариантов не будет.

И заключительный шаг, выбираете ярлык, который создали на начальном этапе.

Сохраняете события и проверяете. Вращение баннера будет останавливаться при наведении курсора мышки, на том кадре, где был сделан ярлык.

Возобновление вращения после отведения курсора мышки.

Для того чтобы вращение было продолжено, после отведения курсора в сторону, настройте ещё одно событие.

Настраивается оно аналогично предыдущему, только лишь с двумя отличиями.

В качестве события выбирается «Мышь» — « mouseout» .

Событие - отведение мышки

А в качестве действия «Временная шкала» — « togglePlay» .

Действие - Продолжить

Вот и готов наш баннер с 3D эффектом. И таких различных эффектов вы можете придумать сколько угодно.

Только не забудьте сделать событие на клик мышки и открытие ссылки. Баннер ведь не ради красоты создавали, ведь так.

Изначально, этот процесс, может показаться сложным, но сделав пару баннеров, вам уже не будет так казаться.

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

С уважением, Максим Зайцев.

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

Сегодня мы собираемся создать баннер используя CSS3 анимацию.

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

Итак, давайте создадим анимированные баннеры!

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

HTML-разметка

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