Спливаючі картинки засобами css3

Можна отримати приголомшливий ефект "спливання" зображення за допомогою jQuery. Але тепер CSS3 дозволяє домогтися такого ж результату з використанням властивостей transition і transform без задіяння додаткових ухіщіреній.

На жаль, описаний в даному уроці метод поки працює тільки з браузерами Safari і Chrome.

В HTML елементі нам потрібно створити один контейнер, який буде розміщувати зображення з шаром, який розташовується зверху над зображенням. Тут насамперед визначається клас images з id, відповідним номером зображення, і два елементи - один є шаром і другий представляє зображення. Таким же чином створюється елементи для всіх зображень.

Тут ми насамперед використовуємо властивість transform тільки для масштабування зображення, коли сторінка тільки завантажується. Потім при "Спливання" ми зробимо розмір зображення більше. Також ми використовуємо властивість transition duration зі значенням в півсекунди для виконання анімації трансоформаціі. "Спливання" зображення від меншого розміру до більшого відбуватиметься протягом пів-секунди. Також потрібно очистити шар, який layer розташовується над зображеннями. Як тільки курсор миші поміщається над зображенням шар layer видаляється з використанням крутого ефекту. Тут також використовується властивість transition duration для установки часу виконання операції. Також індивідуально для кожного зображення встановлюється різні властивості шару layer для отримання різних ефектів.

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!