Можливості CSS3 вражають. В даному уроці ми будемо використовувати їх для реалізації творчих задумів. В результаті вийде набір ефектів, які супроводжують подія наведення курсору миші на об'єкт - буде виводитися опис з використанням різних стилів для кожного прикладу.
Примітка: дані ефекти діють тільки в сучасних браузерах, які підтримують СSS3.
розмітка HTML
Структура розмітки вельми проста і інтуїтивна. Створюємо контейнер, який буде містити зображення і всю іншу інформацію.
Після створення розмітки задамо стилі. Для нашого набору ефектів буде використовуватися клас з загальними правилами, а специфічні властивості будуть додаватися для кожного прикладу у вигляді окремих класів. У тексті уроку префікси виробників браузерів будуть опущені для більшої наочності.
А тепер уявімо 10 ефектів. Відкривайте демонстраційну сторінку в окремому вікні або вкладці, дивіться і вивчайте код.
Додаємо спеціальний клас view-first до елементу з класом view для даного ефекту. Спеціальний клас буде додаватися в кожному прикладі до елементу з класом view (view-first, view-second, view-third, і так далі).
В даному прикладі будуть використовуватися базові переходи для створення відмінного ефекту.
А тепер перейдемо до основи нашого ефекту. Коли курсор миші проходить над зображенням ми використовуємо затримку для імітації простий анімації. Властивість transition-delay. яке використовується в псевдо-класах hover. може вносити зміни для відмінності від звичайного класу. В даному прикладі ми не використовуємо затримки в звичайному класі, але в псевдо-класах hover запуск переходів трохи затримується. Коли курсор миші залишає об'єкт, буде використовуватися значення за замовчуванням 0s, і "відновлення" відбудеться швидко.
Тут клас mask має інші атрибути для побудови ефекту. Ми збираємося використовувати властивості трансформації (translate і rotate):
Для нашого ефекту буде використовуватися трансформація translate для переміщення елементів на місце. А маска буде також обертатися. Елементи опису будуть з'являтися з невеликою затримкою один за одним.
У третьому прикладі ми будемо використовувати трансформації translate і rotate для виведення наших елементів опису:
Досить прості інструкції для отримання ефекту.
У четвертому прикладі буде використовуватися просте масштабування зображення і змісту з використанням трансформації scale. Для зображення буде встановлена затримка 0.2s в стилях, але при наведенні курсору затримка буде 0s. Тому при наведенні курсору миші ефект проявиться негайно, а при прибиранні курсору миші буде затримка.
Прості інструкції для отримання ефекту. CSS3 може все.
При наведенні курсора миші зображення вислизає вправо, і на його місце зліва висувається опис, як би зрушуючи картинку:
Зворотній трансформація також виконується плавно:
У сьомому ефекті ідея полягає в використанні обертання зображення навколо центру та одночасного зменшення його масштабу. А опис потім опускається зверху.
При наведенні курсора миші елементи опису з'являються з затримкою:
В даному прикладі створюється ефект відскоку при опусканні елементів опису зверху.
Ми додаємо анімацію до елемента mask і визначаємо затримай для елеменетов опису:
Для створення ефекту відскоку використовується функція translateY і кілька фреймів:
В даному прикладі ми використовуємо два елементи маски для створення ефекту закриваються штор:
Дві маски мають різні параметри для трансформацій. Також вони вирівняні по-різному.
При наведенні курсора просто змінюється масштаб зображення і прозорість:
висновок
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!