Урок 71 із 104
68%
← Назад

Застосування ефектів у CSS

Вивчаємо, як поєднувати CSS-трансформації, переходи та інші властивості для створення візуальних ефектів при наведенні та зміні стану елементів.

Що таке ефекти в CSS

CSS дозволяє створювати різноманітні візуальні ефекти без JavaScript. Для цього можна поєднувати transform, transition, opacity, box-shadow та інші властивості.

Найчастіше ефекти застосовують при наведенні курсора за допомогою псевдокласу :hover.

  • transform: scale() — збільшення або зменшення елемента.
  • transform: rotate() — поворот елемента.
  • transform: translate() — зміщення елемента.
  • transform: skew() — нахил елемента.
  • opacity — зміна прозорості.
  • box-shadow — створення тіні.
  • transition — плавна зміна властивостей.

Збільшення елемента

.card { transition: transform 0.3s ease; } .card:hover { transform: scale(1.05); }

Поворот елемента

.icon { transition: transform 0.3s ease; } .icon:hover { transform: rotate(15deg); }

Зміщення елемента

.button { transition: transform 0.3s ease; } .button:hover { transform: translateY(-5px); }

Зміна прозорості

.image { transition: opacity 0.3s ease; } .image:hover { opacity: 0.7; }

Комбінація декількох ефектів

Декілька трансформацій можна поєднати в одному значенні властивості transform.

.card { transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px) scale(1.05) rotate(1deg); }

Ефект із тінню

.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgb(0 0 0 / 20%); }
❗ Важливо:

Для плавних ефектів важливо додавати transition до початкового стану елемента, а не тільки до :hover. Це забезпечує плавний перехід як при наведенні, так і при його завершенні.

Практичне завдання

Практичне завдання 1

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. При наведенні збільшуйте його в 1,1 раза.
  3. Зробіть ефект плавним.
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: steelblue; } </style>
💡 Показати підказку

Використайте transition: transform 0.3s ease та transform: scale(1.1) у :hover.

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: steelblue; transition: transform 0.3s ease; } .box:hover { transform: scale(1.1); }

Практичне завдання 2

📌 Завдання:
  1. Створіть кнопку.
  2. При наведенні зміщуйте її на 5px вгору.
  3. Одночасно збільшуйте кнопку в 1,05 раза.
  4. Зробіть ефект плавним.
<!-- Початковий код --> <button class="button">Навести курсор</button> <style> .button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; } </style>
💡 Показати підказку

Поєднайте translateY(-5px) та scale(1.05) в одному значенні transform.

✅ Показати відповідь
.button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; transition: transform 0.3s ease; } .button:hover { transform: translateY(-5px) scale(1.05); }

Практичне завдання 3

📌 Завдання:
  1. Створіть картку.
  2. При наведенні піднімайте її на 5px.
  3. Додайте збільшення тіні.
  4. Обидва ефекти повинні бути плавними.
<!-- Початковий код --> <div class="card"> <h3>Картка</h3> <p>Наведіть курсор.</p> </div> <style> .card { width: 220px; padding: 20px; background-color: white; } </style>
💡 Показати підказку

Додайте transition для transform і box-shadow, а в :hover використайте translateY(-5px) та box-shadow.

✅ Показати відповідь
.card { width: 220px; padding: 20px; background-color: white; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgb(0 0 0 / 20%); }

Практичне завдання 4

📌 Завдання:
  1. Створіть елемент із текстом.
  2. При наведенні зробіть його трохи прозорим.
  3. Одночасно поверніть його на 5 градусів.
  4. Зробіть обидва ефекти плавними.
<!-- Початковий код --> <div class="element">CSS Effects</div> <style> .element { padding: 20px; background-color: seagreen; color: white; } </style>
💡 Показати підказку

Додайте transition для opacity та transform. У :hover використайте opacity: 0.7 та rotate(5deg).

✅ Показати відповідь
.element { padding: 20px; background-color: seagreen; color: white; transition: opacity 0.3s ease, transform 0.3s ease; } .element:hover { opacity: 0.7; transform: rotate(5deg); }