Створюємо анімований банер за допомогою CSS3. Адаптивні банери на HTML5 та CSS3 Просте створення банерів на css3

Щоб зрозуміти структуру нашої розмітки, давайте зосередимося на човні на секунду:

>

>
>
>
Тепер подивимося на перший банер на демонстраційній сторінці . Там є три окремі анімації, які відбуваються на кораблі:
• Анімація - коли човен ковзає з лівого боку. Це застосовується безпосередньо до невпорядкованого списку (група елементів човна).
• Анімація - яка надає човну ефект розгойдування, моделюючи човен, що плаває по воді. Це застосовується безпосередньо до елементів списку (човна).
• Анімація - яка приховує знак питання. Це застосовується до 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: центр;
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.
Безсумнівно, одним із найяскравіших трендів 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

Завдяки розвитку веб-технологій та сучасних браузерів, ми можемо створювати безліч ефектів без використання Javascript. Це значно полегшило життя веб-розробникам. Адже зараз ми можемо створювати ефекти на чистому CSS без використання Javascript. Тому в цій статті я хочу розповісти Вам про те, чи можна створювати банери на чистому CSS, що для цього потрібно, а також про мінуси та плюси цього підходу.
CSS3 дає великий спектр можливостей, ними потрібно лише правильно скористатися. Як приклад, хочу навести посилання на мої минулі роботи "Персонажі на чистому CSS":
Спочатку хочу навести приклади своїх банерів CSS. Можливо, Ви їх вже бачили на сайті, але навіть не здогадувалися за допомогою чого і як вони були створені.
З приводу демо:у кожного прикладу (банера) внизу є тривалість в секундах, а також кнопка "Оновити", яка починає показ банера спочатку.
Банер #1 - "Індивідуальне навчання сайтобудування":
Цей банер я створював близько 2-х днів. Чому так довго? Тому що для адаптації банера (щоб зробити його гумовим) пішов деякий час при перерахунку координат. Наразі його розмір залежить від ширини блока-батька (в якому знаходиться сам банер CSS).
Цей банер я створив буквально за 2-2 години. Єдине, що тут гальмувало процес створення, — це вибір іконок. Тому, що їх необхідно було підібрати близькими за тематикою банера.
Цей банер також розтягується залежно від ширини контейнера блоку, в якому він знаходиться. На створення пішло приблизно 1.5 години.
Виглядають такі банери дуже красиво, але чи все так просто? Давайте подивимося на плюси та мінуси такого способу створення банерів.
Переваги та недоліки CSS банерів:
Як створити банер CSS?
1 Ідея
Для початку необхідно точно знати, яка анімація повинна бути у банера (що, куди і звідки має рухатися і де з'являтися). Ви можете взяти лист А4 і промалювати куди рухатиметься кожен елемент і що на банері має бути.
Адже не можна почати створювати банер, якщо Ви не знаєте, що він повинен представляти і як функціонувати.
2 HTML структура
Наступним кроком необхідно створити розмітку HTML таким чином, щоб елементи можна було переміщати (і створювати для них анімацію). Тобто не можна зробити все одним зображенням, яке виїжджатиме праворуч або ліворуч і на цьому анімація закінчена.
Як правило, є один загальний блок, в якому знаходяться всі інші. І в цьому загальному блоці ми можемо керувати елементами, як нам це необхідно.
3 CSS анімація
Завершальним етапом є створення анімації для блоків, і навіть написання стилів їм, оскільки деякі частини анімації бувають приховані за умовчанням.
Щоб створити свій банер, Вам необхідно добре володіти основами CSS та HTML.
Вивчіть базову анімацію на CSS за допомогою цього уроку - .
Висновок
Усе сучасні браузерипідтримують CSS3 властивості, а значить, і банери будуть коректно відображатися в таких браузерах. Але за допомогою JS плагінів можна створити банер CSS і для старих браузерів. Вивчивши основи анімації CSS, Ви зрозумієте процес створення банерів та незабаром створите свій перший банер на чистому CSS! 😉