Практичні заняття з HTML, CSS ч.2

У твоєму коді вже є досить просунуті речі: анімація появи (fadeInUp), градієнти та ефекти при наведенні (hover).

Що ми маємо в шаблоні:

• Контейнер: Білий блок із тінню, заокругленими кутами та синьою смугою зверху.

• Кнопка: Має ефект масштабування та зміну кольору при наведенні (зараз там намішано синій, градієнт та фіолетовий).

• Зображення: Кругле (border-radius: 50%), з обводкою, яке трохи повертається при наведенні.

• Список: Елементи мають світло-блакитний фон.

  Тепер зробимо зміни в нашій веб-сторінці.

  1. Живий фон (плавний перелив)

     

  2. Анімація миготіння для заголовка

     Цей код змусить заголовок h1 мерехтіти, як стара неонова вивіска.

     

  3. Ефект для елементів списку

     Це додасть об'єму пунктам вашого списку хобі.

     

     1. Додаємо анімовану підсвітку (пульсацію) для зображення! Це зробить твою сторінку ще динамічнішою та посилить неоновий ефект.

        Тобі потрібно знайти у своєму style.css блок, що стосується img, і замінити його (або додати нові властивості).

        

        Застосовуємо анімацію до зображення

        Знайди блок img { ... } і додай туди одну стрічку:

        

        1. Створюємо анімований фон «Зоряне небо».

           Для цього нам не потрібно міняти HTML, ми використаємо псевдоелемент у CSS. Це дозволить створити шар із зорями, який буде знаходитися під вашим контентом, але над темним фоном.

           Ось код, який потрібно додати до вашого style.css:

           

           

           Що саме ми зробили (деталі):

           body::before: ми створили «віртуальний» шар. Це зручно, бо нам не довелося додавати зайві теги <div> у ваш HTML-файл.

           radial-gradient: це хитрість у CSS. Замість того, щоб завантажувати картинку з зірками, ми малюємо їх кодом. Це маленькі білі крапки розміром в 1 піксель.

           z-index: -1: це дуже важливо. Це каже браузеру: «поклади цей шар під низ», щоб зорі не перекривали ваш текст чи кнопку.

           animation: starsMove: ми змусили фон дуже повільно (100 секунд на повний цикл) рухатися по діагоналі. Це створює заспокійливий ефект польоту крізь космос.

           1. Неонова картка для списку.

              Зараз пункти хобі («цікаві сюжети», «можна грати з друзями» тощо) виглядають як прості блоки. Ми зробимо їх інтерактивними: при наведенні мишкою вони будуть яскраво підсвічуватися, змінювати колір тексту та трохи «виринати» вперед.

              Ось код, який потрібно змінити або додати у ваш style.css:

              Знайдіть блок li { ... } і замініть його на цей (або додайте відсутні рядки):

              

              Створити:

              

              ---

              Що ми додали (деталі):

              • transition з cubic-bezier: це спеціальна функція плавності. Вона робить рух не просто лінійним, а трохи «пружинистим», що виглядає набагато професійніше.

              • transform: translateY(-5px): цей рядок відповідає за те, щоб при наведенні пункт списку фізично піднімався вгору на 5 пікселів.

              • box-shadow у стані :hover: ми використали рожевий колір (#ff00e5) з розмиттям 20 пікселів, що створює ефект світіння лампи на темній стіні.

           Ми перетворили звичайну сторінку на сучасний футуристичний інтерфейс у стилі «Темний неон».

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

           ---

           1. Глибокий атмосферний фон (Space & Motion)

           • Градієнт: Замість однотонного сірого ми використали linear-gradient, що створює плавний перехід від чорного до темно-фіолетового.

           • Ефект «Зоряне небо»: За допомогою псевдоелемента body::before ми додали дрібні білі зірки.

           • Анімація руху: Зірки повільно рухаються по діагоналі (starsMove), створюючи ефект польоту крізь космос.

        2. Живий неоновий заголовок (Neon Flicker)

        • Миготіння: Додали анімацію flicker, яка імітує роботу справжньої неонової лампи. Текст періодично стає тьмянішим, а потім спалахує яскравим блакитним світлом.

        • Сяйво: Використали багатошарову тінь text-shadow, щоб створити ефект світіння, яке розсіюється навколо літер.

     3. Контейнер із відзеркаленням (Mirror Floor)

     • Дзеркальна підлога: Завдяки властивості -webkit-box-reflect, під основним білим блоком з'явилося м'яке відображення, ніби сторінка стоїть на глянцевій поверхні.

     • Неонова рамка: Контейнер тепер має чітку ціанову обводку та легку зовнішню тінь, що підтримує загальний стиль.

  4. Пульсуюче фото (Pulse Effect)

  • Анімоване сяйво: Зображення отримало анімацію pulse. Рожеве світло навколо фото плавно стає то яскравішим, то тьмянішим, ніби воно «дихає».

• Динаміка: При наведенні курсору фото не просто повертається, а й трохи збільшується (scale), стаючи активним елементом інтерфейсу.

5. Інтерактивні картки списку (Hover Interaction)

• Пружиниста анімація: Пункти меню тепер реагують на мишку за допомогою cubic-bezier. Вони не просто змінюються, а плавно «виринають» вперед.

• Зміна кольору: При наведенні блакитний неон змінюється на яскраво-рожевий, а фон картки стає світлішим.

Виконати зміни в файлах index.html та styles.css та завантажити на веб-сервер. Додати посилання в нотатках на домен