Menu
Coddy logo textTech
ZACZNIJ NAUKĘ
flag Pl iconPolskidown icon

Pływające powiadomienie

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 76 z 76.

challenge icon

Wyzwanie

Łatwy

W tym wyzwaniu odtworzysz pływające powiadomienie, które wygląda jak na obrazku poniżej (lub ma podobny wygląd). To ćwiczenie powtórkowe, więc wykorzystasz zdobytą wiedzę na temat pozycjonowania w CSS, aby prawidłowo umieścić powiadomienie i przycisk zamykania.

Wykonaj poniższe kroki, aby ostylować pływające powiadomienie:

1. Ostyluj pole powiadomienia:

  • Umieść je blisko górnej krawędzi strony, mniej więcej pośrodku.
  • Ustaw stałą szerokość i dodaj trochę odstępu wewnątrz.
  • Użyj dowolnych kolorów tła, czcionki i obramowania, aby nadać mu wyrazisty wygląd alertu.
  • Dodaj zaokrąglone rogi i delikatny cień, aby je wyróżnić.

2. Ostyluj przycisk zamykania:

  • Użyj position: absolute, aby umieścić przycisk zamykania w prawym górnym rogu kontenera powiadomienia.
  • Wybierz tło i dostosuj rozmiar czcionki.
  • Upewnij się, że wygląda na klikalny i wyróżnia się na tle.

💡 Eksperymentuj z kolorami, odstępami i pozycjonowaniem, aby uzyskać pożądany wygląd!

Spróbuj swoich sił

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>

Wszystkie lekcje w sekcji Stylizacja za pomocą CSS

1Wprowadzenie

Czym jest CSS?Składnia CSSKomentarze CSSZnacznik headZnacznik title

4Podstawy tekstu

Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #2

7Model pudełkowy, część 1

Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące

10Formularz logowania

Treść stronyKontener formularzaLekcja projektowaPole tekstoweLekcja projektowaPrzyciskLekcja projektowa

13Strona internetowa Tonga

Menu nawigacyjneNagłówek powitalnyLekcja projektowaSekcja „O nas”Lekcja projektowaSekcja kontaktowaLekcja projektowaZnacznik viewportLekcja projektowaMedia queryLekcja projektowa

2Dodawanie CSS

CSS inlineWewnętrzny CSSZewnętrzny CSSWyzwanie: podstawowe stylowanie

5Kolory i tła

Kolor tłaKolory HEXKolory RGBPrzezroczystość z RGBAWyzwanie podsumowujące nr 1

8Model pudełkowy, część 2

Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące

11Techniki układu

Elementy blokowe a liniowePodstawy pozycjonowaniaPozycjonowanie względnePozycjonowanie bezwzględnePozycjonowanie stałePodstawy z-indexWyzwanie podsumowujące

14Wyzwania końcowe

Układanie elementówLista filmówZaproszenie ślubnePływające powiadomienie

3Podstawowe selektory

Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory

6Kawiarniane menu

Podstawy typografiiStylizacja tekstuLekcja projektowaKolory i tłaLekcja projektowa

9Flexbox

Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox

12Podstawy responsywnego projektowania

Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazy

Poćwicz samodzielnie: Edytor online Web