Lekcja 6: CSS Transitions – Spraw, żeby Twoje Elementy Ruszały Się Jak Prawdziwe Gwiazdy!

Lesson6

Lekcja 6: CSS Transitions – Spraw, żeby Twoje Elementy Ruszały Się Jak Prawdziwe Gwiazdy!

Wprowadzenie

Cześć, mistrzu stylu! 🪄 Gotowy, żeby dodać odrobinę magii do swoich elementów HTML? Jeśli podstawowe style CSS są jak przygotowanie barszczu, to CSS transitions są jak delikatne nalewanie śmietanki na wierzch: wszystko płynnie, bez jednej kropli poza miseczką. W tej lekcji nauczysz się tworzyć przejścia, które sprawią, że Twoje przyciski i teksty będą bardziej eleganckie niż kelner w najlepszej restauracji.

Pod koniec tej lekcji Twoi znajomi zapytają: “Czy ten przycisk właśnie zmienił kolor i rozmiar z gracją, jakby miał własnego trenera od stylu?” A Ty z dumą odpowiesz: “Tak, dzięki CSS!”. No to co, parzymy kawę i zaczynamy!

Krok 1: Co To Są CSS Transitions?

Wyobraź sobie, że nalewasz kawę do filiżanki. Zamiast nagle chlusnąć wszystko (auć!), robisz to powoli, z wdziękiem. CSS transitions robią to samo z Twoimi elementami: zamiast skakać i zmieniać się gwałtownie, przechodzą między stylami płynnie — jak kelner, który stawia filiżankę herbaty z uśmiechem.

Oto prosty przykład:

button {
    background-color: #3498db; /* Piękny niebieski przycisk */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Tu zaczyna się magia */
}

button:hover {
    background-color: #2c3e50; /* Kolor zmienia się powoli przy najechaniu */
}

Kiedy najedziesz myszką na przycisk, zamiast zmienić kolor jak uderzenie pioruna, on zmienia się płynnie w ciągu 0,3 sekundy — jak kelner, który podaje kieliszek wina bez rozlania ani kropli.

Krok 2: Przygotowanie Folderu Projektu – Bo Musi Być Porządek

Stwórzmy folder i pliki, żeby nasz projekt miał porządek i klasę:

cd ~/Documents/
mkdir moj-projekt-css-transitions
cd moj-projekt-css-transitions
touch index.html styles.css

Teraz otwórz index.html w swoim ulubionym edytorze:

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transitions – Płynnie i Stylowo!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Witaj w świecie CSS Transitions!</h1>
        <p>Najeżdżaj kursorem na przycisk poniżej, aby zobaczyć płynne przejścia w akcji:</p>
    </header>
    <main>
        <button>Najeżdżaj Na Mnie!</button>
    </main>
    <footer>
        <p>&copy; 2024 Płynne Przejścia</p>
    </footer>
</body>
</html>

CSS

Otwórz styles.css i dodaj następujące style:

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;
}

/* Styl dla przycisku */
button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Przejście dla koloru i transformacji */
}

button:hover {
    background-color: #2c3e50; /* Zmiana koloru na hover */
    transform: scale(1.1); /* Lekkie powiększenie */
}

Krok 3: Uruchomienie Lokalne z Caddy – Ożyw Swoją Stronę!

Czas zobaczyć naszą magię w akcji! Użyjmy Caddy, aby uruchomić projekt lokalnie:

  1. Otwórz terminal i przejdź do folderu projektu:

    cd ~/Documents/moj-projekt-css-transitions

  2. Uruchom lokalny serwer za pomocą Caddy:

    caddy file-server --listen :8080

  3. Otwórz przeglądarkę i wpisz adres:

    http://localhost:8080

Gotowe! Najeżdżaj kursorem na przycisk i patrz, jak elegancko zmienia kolor i rozmiar.

Ważna Rada: CSS nie działa?

Jeśli wprowadziłeś zmiany w CSS, ale ich nie widzisz, przeglądarka może korzystać z pamięci podręcznej. Aby temu zaradzić, odśwież stronę na twardo:

  • Windows/Linux: CTRL + F5 lub CTRL + SHIFT + R
  • Mac: CMD + SHIFT + R

Teraz przeglądarka powinna pobrać wszystkie najnowsze zmiany!

Krok 4: Eksperymentuj z Przejściami – Baw Się!

Skoro już wiesz, jak to działa, czas na zabawę! Dodaj przejścia do innych właściwości, jak margin, padding czy border-radius. Oto kilka przykładów:

/* Płynna zmiana koloru tekstu */
button {
    transition: color 0.3s ease-in-out;
}

button:hover {
    color: #ffeb3b; /* Jaskrawożółty tekst */
}

/* Lekkie obracanie przycisku */
button:hover {
    transform: rotate(5deg);
}

Eksperymentuj i sprawdź, co możesz stworzyć. Ale pamiętaj: zbyt wiele animacji — i Twoja strona zacznie wyglądać jak pokój dyskotekowy!

Wyzwanie – Stwórz Podskakującą Piłkę!

Dla wyzwania stwórz element <div> w kształcie piłki i użyj transitions, aby podskakiwała przy najechaniu kursorem. Oto przykład:

<div class="pilka"></div>

CSS

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

.pilka:hover {
    transform: translateY(-20px); /* Piłeczka podskakuje */
}

Dodaj więcej przejść, aby piłka była jak najbardziej żywa — jak na prawdziwej imprezie!

Podsumowanie

Świetna robota, mistrzu przejść! Teraz potrafisz sprawić, że Twoje elementy CSS będą ruszać się z klasą i elegancją. Niezależnie, czy to zmiana koloru, czy powiększenie, dodajesz swoim projektom odrobinę magii.

W następnym rozdziale poznamy animacje CSS — i wyniesiemy Twoje umiejętności na wyższy poziom. To jak przejść z tańca przy ognisku do profesjonalnej choreografii. Do zobaczenia!

CSS  Transitions  Animacje  Web Design  Początkujący  Caddy Server 

Zobacz też