| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Вивести анімований фон на веб-сторінці.
Рішення
Мультиплікація це досить сильний прийом, здатний пожвавити будь-який документ, тому не дивно, що величезну популярність набула технологія Flash, яка додає на веб-сторінки мультики, до того ж інтерактивні. Графічний формат GIF також підтримує просту анімацію шляхом послідовної зміни кадрів. Так що використовуючи зображення в цьому форматі допустимо анімувати не тільки окремі картинки, але також фон веб-сторінки або певного елемента.
Спочатку потрібно створити анімовану картинку у форматі GIF, для чого можна скористатися програмою Adobe Photoshop або іншою підходящую для цієї мети. Також існують бібліотеки готових анімованих файлів, які можна застосовувати в якості фонової картинки. Далі зображення додається в якості фону за допомогою стильового властивості background, як показано в прикладі 1.
Приклад 1. Анімований фон веб-сторінки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Анімований фон</title>
<style>
html {
height: 100%; /* Висота веб-сторінки */
background: #000 url(images/light.gif)
no-repeat bottom right; /* Шлях до графічного файлу з фоном */
color: #fff; /* Білий колір тексту */
}
</style>
</head>
<body>
<p>Вміст веб-сторінки</p>
</body>
</html>
В даному прикладі файл light.gif встановлюється в якості фонової картинки у правому нижньому куті веб-сторінки. Також задається чорний колір фону.
Врахуйте, що будь-анімація привертає до себе увагу, тому використовувати її слід дуже обачно, щоб не втомлювати читачів та не відволікати їх від основного змісту сайту.