Урок 6: CSS-переходи — Зроби, Щоб Твої Елементи Рухались Гладко!

Lesson6

Урок 6: CSS-переходи — Зроби, Щоб Твої Елементи Рухались Гладко!

Огляд

Привіт, майстре плавних рухів! 🪄 Готовий перетворити свої елементи HTML на справжніх танцюристів? Якщо базові стилі CSS — це як розташувати меблі в кімнаті, то CSS-переходи — це як змусити ті меблі пливти плавно з кута в кут, мов на балеті. У цьому уроці ти дізнаєшся, як додати до своїх кнопок і тексту трошки магії, щоб вони більше не стрибали, а елегантно ковзали.

Після цієї глави твої користувачі запитають: “Що це за фокус? Кнопка щойно плавно збільшилась?” А ти просто усміхнешся і скажеш: “Це все CSS, малята!”. То що, бери чайок, зручно влаштовуйся, і поїхали!

Крок 1: Що Таке CSS-переходи?

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

Ось простий приклад:

button {
    background-color: #3498db; /* Гарна синя кнопка */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Тут відбувається магія */
}

button:hover {
    background-color: #2c3e50; /* При наведенні мишки колір фону змінюється плавно */
}

Коли ти наводиш курсор на кнопку, замість різкого переключення кольору, вона змінює його за 0.3 секунди — як сервіс у кафе, який не поспішає, але робить все з класом.

Крок 2: Створюємо Папку Проекту — Тому що Порядок Перш за Все!

Створимо нову папку і файли, щоб наш проект був чітким, як план на літо:

cd ~/Documents/
mkdir moy-css-proekt-perekhody
cd ~/Documents/moy-css-proekt-perekhody
touch index.html styles.css

Тепер відкрий index.html у своєму улюбленому редакторі:

HTML

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-переходи — Гладко і Елегантно!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Ласкаво просимо у світ CSS-переходів!</h1>
        <p>Наведи курсор на кнопку нижче, щоб побачити, як вона змінюється:</p>
    </header>
    <main>
        <button>Наведи на мене!</button>
    </main>
    <footer>
        <p>&copy; 2024 Плавні Переходи</p>
    </footer>
</body>
</html>

CSS

Відкрий styles.css і додай такі стилі:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding-top: 50px;
}

header, footer {
    background-color: #3498db;
    color: white;
    padding: 20px;
}

main {
    margin: 20px;
    padding: 20px;
}

/* Стиль для кнопки */
button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Переходи для кольору і трансформації */
}

button:hover {
    background-color: #2c3e50; /* Зміна кольору при наведенні */
    transform: scale(1.1); /* Легке збільшення розміру */
}

Крок 3: Запускаємо Локально за Допомогою Caddy – Дай Життя Своєму Проекту!

Давай перевіримо наш проект у дії! Використаємо Caddy для локального запуску:

  1. Відкрий термінал і перейди у свою папку проекту:

    cd ~/Documents/moy-css-proekt-perekhody

  2. Запусти локальний сервер за допомогою Caddy:

    caddy file-server --listen :8080

  3. Відкрий браузер і переходь на:

    http://localhost:8080

Готово! Наведи мишку на кнопку і подивися, як вона змінює колір і розмір, наче справжній танцюрист!

Важлива Порада: CSS не оновлюється?

Якщо ти вніс зміни в CSS, але не бачиш їх, браузер може використовувати стару версію з кешу. Щоб це виправити, онови сторінку жорстко:

  • Windows/Linux: CTRL + F5 або CTRL + SHIFT + R
  • Mac: CMD + SHIFT + R

Так ти змусиш браузер підвантажити нову версію з усіма твоїми змінами!

Крок 4: Експериментуй з Іншими Переходами – Будь Творчим!

Тепер, коли ти знаєш основи, час розважитися. Спробуй додати переходи для інших властивостей, як-от margin, padding або навіть border-radius. Ось декілька ідей:

/* Плавна зміна кольору тексту */
button {
    transition: color 0.3s ease-in-out;
}

button:hover {
    color: #ffeb3b; /* Яскравий жовтий текст при наведенні */
}

/* Легке обертання кнопки */
button:hover {
    transform: rotate(5deg);
}

Експериментуй і подивись, які ефекти ти можеш створити. Але пам’ятай: занадто багато анімацій — і твоя сторінка перетвориться на різдвяну ялинку. 😉

Крок 5: Випробування – Створи Підстрибуючий М’ячик!

Для додаткового виклику створюй елемент <div> у вигляді м’ячика і використовуй переходи, щоб він підстрибував при наведенні миші. Ось початковий приклад:

<div class="myachyk"></div>

CSS

.myachyk {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    border-radius: 50%;
    margin: 50px auto;
    transition: transform 0.3s ease-in-out;
}

.myachyk:hover {
    transform: translateY(-20px); /* Зроби, щоб м'ячик підстрибнув вгору */
}

Спробуй додати ще більше переходів, щоб м’ячик став ще жвавішим — наче в цирковій виставі!

Висновок

Молодець, майстре переходів!

CSS  Переходи  Анімації  Веб-дизайн  Початківці  Caddy Server 

See also