W tej lekcji zajmiemy się stylowaniem naszej gry. Skorzystamy z wcześniej stworzonego kodu CSS, który będziemy edytować.

Stylujemy naszą grę

W poprzedniej lekcji dodaliśmy pewne podstawowe style, ale to jeszcze nie wszystko. Na pewno udało Ci się zauważyć, że Twoja gra nabrała kolorów i zyskała nowe fonty, oraz ich wielkości. Tło zostało zmienione na zielony itp.

Zadanie 3

Możesz teraz zmienić na przykład wielkość użytej czcionki, jej rozmiar, czy kolor. Spróbujmy najpierw od koloru tła. Znajdź w swoim kodzie fragment odpowiedzialny za przypisanie koloru tła i spróbuj zmienić go na taki, który Ci się podoba.

Za kolor tła odpowiada fragment: background: #02ac46.

Czas na Twoje działanie: wybierz kolor, który będzie przewodnią barwą Twojej strony i umieść go w zmiennej background: (zastąp nim obecny kolor).

Zastanawiasz się skąd wziąć takie kody? Najprościej jest zrobić to, wchodząc na stronę Flat UI Colors, następnie wybierając paletę kolorystyczną, która Ci się podoba, a na końcu klikając na kolor, którego chcesz użyć. Jego wartość automatycznie skopiuje się do Twojego schowka, więc wystarczy tylko wkleić ją w odpowiednim miejscu w kodzie.

Teraz zajmijmy się naszym guzikiem, który w tej chwili nie wygląda zbyt ładnie. W swoim kodzie CSS dodaj następujący fragment:

Skupmy się teraz na kilku fragmentach tego kodu:

background: - dzięki niej możesz zmienić tło swojego buttonu na dowolne

border: - możesz tutaj zmienić typ i grubość ramki swojego guzika

padding: - pozwoli Ci zwiększyć lub zmniejszyć przestrzeń wewnątrz przycisku

cursor: - dzięki tej zmiennej możesz zmienić rodzaj kursora wyświetlanego po najechaniu myszą na guzik

font-size: - wielkość czcionki w przycisku

Zwróć też uwagę na button:hover wszystko, co mieści się wewnątrz tej klasy, opisuje zachowanie guzika po najechaniu na niego myszą. Dzięki temu możesz zmienić również powyższe elementy w guziku widocznym w twojej grze, ale także w momencie najechania na niego kursorem.

Spróbuj teraz pobawić się tymi wszystkimi zmiennymi i dopasować wygląd swojej gry, przycisku, tła, fontów, itp. w dowolny sposób, tak żeby osiągnąć efekt, który Ci się podoba.

Zadanie 4

Stworzymy teraz pole, w którym będziemy rysować naszego wisielca. Dodaj w swoim kodzie CSS style, które będą odpowiadały za wygląd naszego klasy wrapper:

Jak pewnie udało Ci się zauważyć, w naszej grze pojawiło się nowe pole w kształcie kwadratu, w którym z obrysem w formie kropek. Oczywiście tak jak poprzednio możesz zmienić rodzaj i grubość tych linii zmieniająć wartości tych zmiennych: color: #fff;, oraz border: #fff dashed 2px;

W kolejnej lekcji dodamy sobie kod JavaScript i będziemy stylizować nasz alfabet, do wybierania liter występujących w grze.