Przygotuj wirtualną animowaną kartę walentynkową

. Możesz za to zmieniać wszystko, co znajduje się pomiędzy znacznikami. Spójrzmy na przykład na tę linijkę kodu: <h1 class="main-title">Wirtualna walentynka!</h2>. Nie zmieniamy znaczników <h2 class="main-title"> oraz </h2>, ale możesz zmienić "Wirtualna walentynka!" na dowolny inny tekst.

Możesz też zmienić tekst, który znajduje się pomiędzy <p>. Dzięki temu Twoja kartka walentynkowa będzie miała unikatowy tekst, który tam wstawisz.

Żeby kartka nie była taka smutna, możemy w niej umieścić grafiki tj. jpegi czy gify. Ja wybrałem gifa, którego znalazłem na stronie GIPHY. Na końcu kodu HTML dodaj kod iframe wygenerowany na GIPHY. Możesz skorzystać z tego samego obrazka co ja lub dodać inny, który Ci się podoba.

Następnie poniżej dodaj kolejny fragment kodu, czyli informację o tym że "Wiadomość jest ukryta pod serduszkiem!" oraz dodamy serduszko. Skopiuj po prostu skopiuj ten kod i wklej dalej w pudełku HTML:

Serduszko które teraz zostało wklejone jest zapisane w SVG. Jest to uniwersalny format dwuwymiarowej grafiki stworzony specjalnie z myślą o stosowaniu go na stronach WWW. Taki kod może być wyeksportowany z programów do grafiki wektorowej takich jak "Adobe Illustrator" czy "Sketch"

.

Nie przejmuj się tym, że na razie wszystko wygląda bardzo surowo. Zaraz nad tym popracujemy!

Na razie dostosuj całą treść swojegj kartki jak tylko chcesz!

CSS, czyli wygląd

Teraz, kiedy masz już gotową treść swojej aplikacji do zadań, możemy dodać kod odpowiedzialny za jego wygląd!.

W "pudełku" o nazwie CSS wstaw następujący kod:

Widzisz zapewne, że kolor tła naszej strony zmienił się na gradient przechodzący z jasnego różu w ciemniejszy, oraz serduszko, które będzie guzikiem nabrało koloru czerwonego i zmieniło swoją wielkość.

Jak piszemy CSS?

Podobnie jak elementy HTML, reguły CSS mają własną strukturę, której należy się trzymać, aby kod działał poprawnie. Spójrz na przykład poniżej:

Z czego składa się reguła CSS?

• selektor – element HTML, na który ma działać dany styl. W tym przykładzie są to wszystkie elementy <p> na stronie.
• nawias klamrowy ({ }) – występuje zaraz po selektorze. Umieszczamy w nim wszystkie właściwości CSS dla danego elementu.
• właściwość (ang. property) – określa, co chcemy zmienić w wyglądzie danego elementu HTML. Po właściwości wstawiamy dwukropek. W naszym przykładzie użyliśmy właściwości color, odpowiedzialnej za kolor czcionki w elemencie.
• wartość (ang. value) – określa, w jaki sposób chcemy zmodyfikować daną właściwość. W przykładzie nadaliśmy naszej właściwości wartość green, co oznacza, że kolor czcionki zmieni się na zielony. Po wartości zawsze stawiamy średnik.

Jeżeli chcemy przypisać więcej niż jedną właściwość do selektora, robimy to w ten sposób:

Spójrz na kod CSS w swoim edytorze. Przeanalizujmy go linijka po linijce:

1. body to selektor, którego będzie dotyczyć styl. Nie widzisz go w kodzie HTML, gdyż Codepen dodaje go automatycznie i nie musimy go sami deklarować. Po nazwie selektora otwieramy nawias klamrowy.
2. background-image: linear-gradient(to right,#e394a2 0,#b61e38 100%); – właściwość background-image nadaje kolory tła elementu. Nadaliśmy mu wartość linear-gradient(to right,#e394a2 0,#b61e38 100%), czyli wykorzystaliśmy zdefiniowaną zmienną, która tworzy linearny gradient z dwóch kolorów. Kolory są opisane w HEX-ach czyli w wartośćiach zaczynających się od # i składających się z 6 kombinacji cyfr i liter. Możesz wybrać dowolne kolory z programu do generowania kodów #HEX z palety barw (np. z tego) i podmienić je na takie które Ci się podobają.
3. text-align: center;; – za pomocą właściwości text-align: możemy określić sposób wyrównywania tekstu. W naszym przypadku skorzystaliśmy z wartośćicenter, dlatego tekst jest wyśrodkowany. Mozesz zmienić tą wartość np. na left lub right i zobaczyć co się stanie.
4. font-family: 'Roboto', sans-serif; – właściwość font-family określa nam czcionkę z której korzysta nasza strona.

Stylujemy listę

Mamy już dodane pewne podstawowe style, ale to jeszcze nie wszystko. Zajmijmy się teraz stylowaniem samej kartki!

Zadanie 3

Na samym końcu swojego kodu CSS wklej następujący fragment:

W ten sposób nadaliśmy liście kolor tła i cień. Nie musi Cię interesować wszystko, co dzieje się w tym kodzie (chyba, że zechcesz zgłębić wiedzę na własną rękę). Zachęcamy Cię jednak do próby modyfikacji wartości width: 600px; (szerokość listu), padding: 48px; (odległość między krawędzią listu a treścią) czy border: 2px solid #6E4667; (grubość obrysu, jego rodzaj oraz kolor). Spróbuj zmienić liczby przy tych właściwościach i sprawdź, co się stanie!

Dodajmy również cień do naszej listy, żeby uzyskać delikatny efekt oderwania od tła. Możesz wygenerować sobie cień na stronie: Box Shadow Generator. Po ustawieniu cienia, który Cię interesuje możesz dodać jego wygenerowany kod w treści selekktora .letter po wartości border. Zobacz jak wygląda to w moim kodzie (fragment przeklejony z generatora zaznaczyłem na żółto):

Dodajemy modal ukryty pod serduszkiem

Czas na dodanie ukrytego listu (wyskakującego okienka popup tzw. modal), który wyświetli się po kliknięciu w serduszko!

Zadanie 4

Teraz dodamy do naszego kodu HTML kod, który doda treść, która będzie się potem wyświetlać dopiero po kliknięciu w serduszko. Na końcu kodu HTML, który stworzyłeś dodaj:

W kodzie który teraz dodałeś możesz ustawić treść, która ma się wyświetelać w okienku które będzie wyskakiwać po kliknięciu w serduszku (na razie jak widzisz jest ona widoczna na Twojej stronie od razu, ale za chwilę to zmienimy). Tak jak w pierwszej częsci w której zmieniałeś treści HTML możesz dowolnie edytować tekst pomiędzy znacznikami.

Jeżeli udało Ci się już to zrobić to teraz dodaj fragment kodu CSS:

Zauważ, że treść, którą edytowałeś przed chwilą zniknęła. Dzięki pseudo-klasie :target stanie się ona widoczna poprzez kliknięcie w serduszko. Na tą chwilę nie musisz rozumieć wszystkich elementów dodanego kodu jednak, omówimy sobie kilka z nich tak żeby zmiana wizualna tego pop-up modalu była dla Ciebie łatwością.

Zwróć uwagę na właściwość transition - odpowiada ona m.in za prędkość pojawiania się okienka po kliknięciu w serduszko. Określona jest poprzez wartość 1.8s (czyli oznacza to, że animacja do pełnego odpalenia ma trwać przez 1.8 sekundy). Możesz zmienić tą wartość na wyższą lub niższą, zależnie od Twoich upodobań.

W selektorze modal-window > div możesz znaleść właściwość border-radius:, która pozwoli Ci zmienić zaokrąglenie rogów Twójego modala. Spróbuj się pobawić jej wartośćią i zobacz jak to wpływa na ten modal.

W tym samym selektorze zwróć również uwagę na width:, którego wartość odpowiada za szerokość okienka, oraz na background: w którym możesz zmienić kolor tła, a także na color:, którego wartość definiuje kolor liter na Twoim popupie. Możesz też zmienić grubość i typ ramki poprzez zmianę wartości we właściwości border:

Ustal więc wszędzie takie wartości tak jak chcesz i dostosuj modal popup do swoich potrzeb.

Dodajemy animację serduszka

Byłoby fajnie gdyby twój guzik serduszka był bardziej żywy. Poprzez kod CSS możemy tchnąć w niego trochę życia i dodać efekt pulsowania. Znajdź w swoim kodzie CSS selektor .heart odpowiadający za serce.

Dodamy teraz pod nim kod, który spowoduje, że serce będzie się animować (powiększać i pomniejszać). Wykorzystamy do tego @keyframes pulse. Dodaj go na końcu swojego selektora .heart. Teraz umieścimy w nim właściwości i wartośći.

Skorzystaj z tego kodu:

Wartość transform: scale(1.3); definiuje o ile ma się powiększyć serce w 50% trwania animacji. Tak więc śmiało możesz zmienić wielkość z 1.3 na inną dowolną. Więc gdy ustawisz na przykład wartość 4.0 twoje serce powiększy się w trakcie animacji czterokrotnie.

Możesz śmiało poeksperymentować i dostosować jego animację do swojego gustu.

Animacja startowa

Jeżeli chcesz żeby Twoja kartka miała animację wejścia przy uruchomieniu strony to teraz ją dodamy. Posłużymy się do tego aplikacją App Guruz CSS Animation. Możesz w niej (z tabelki po lewej stronie) wybrać rodzaj animacji, który Ci się podoba. Następnie po wciśnięciu guzika "Show CSS Code" skopiować wyświetlony kod i wkleić go na końcu swojego kodu CSS.

Oczywiśćie wklejony kod od razu nie zadziała, ponieważ odwołuje się do selektora nieistniejącego w Twoim CSS-ie. Zmień nazwę wklejonego selektora na .letter tak jak ma to miejsce w moim kodzie:

Jeżeli chcesz dodać animację do innych selektorów swojego kodu to po prostu dodaj je na końcu swojego CSS i zmień selektor na ten do którego ma się ona odnosić. Zachęcam do eksperymentowania z rodzajami animacji i typami animowanych elementów.

BONUS: Typografia, czyli czcionki

Kolejnym krokiem będzie zmiana czcionek w naszym projekcie. Obecnie widoczne są podstawowe, domyślne fonty, a możliwości jest przecież dużo więcej. Ostrzegamy – zabawa z czcionkami uzależnia!

Wykorzystamy najbardziej znaną kolekcję darmowych czcionek, gotowych do użycia na stronach internetowych: Google Fonts (https://fonts.google.com/).

W przykładzie wybierzemy dwa fonty: jeden dla nagłówków, drugi dla reszty tekstu. Ty oczywiście możesz w swoim projekcie użyć większej liczby krojów czcionek, ale zalecamy umiar – w typografii mniej znaczy więcej :)

Zadanie bonusowe

1. Wejdź na stronę Google Fonts (https://fonts.google.com/) i wybierz kroje czcionek dla swojej strony (przynajmniej dwa). Jeżeli nie możesz się zdecydować, przejrzyj gotowe zestawienia tutaj:
   • https://www.reliablepsd.com/ultimate-google-font-pairings/
   • https://fontpair.co/
   • https://www.garettcreative.com/21-google-fonts-combinations-for-websites-brands/
   • https://www.typewolf.com/google-fonts
2. Następnie kliknij ikonę plusa przy każdej z wybranych czcionek:
3. Kliknij na ten pasek u dołu ekranu, aby otworzyć okno konfiguracji czcionek:
4. W oknie konfiguracji kliknij “Customize”. Dla każdej czcionki wybierz wagi (grubości), których chcesz użyć na stronie. Na dole tego okna, w sekcji “Languages”, zaznacz również opcję “Latin Extended”, jeżeli jest dostępna. Służy ona do tego, by czcionka poprawnie obsługiwała polskie znaki.
5. Kiedy już wybierzesz wagi czcionek, w oknie konfiguracji kliknij “Embed” (tuż obok “Customize”). W sekcji “Embed Font” wybierz opcję “@IMPORT” oraz zaznacz i skopiuj treść pokazaną na obrazku poniżej (znajdującą się pomiędzy znacznikami <style></style>). Oczywiście ta treść będzie się różnić w zależności od wybranych czcionek:
6. Przejdź do swojego edytora Codepen i wklej skopiowaną treść na samej górze pliku CSS, jeszcze przed zmiennymi.
7. W pliku CSS utwórz zmienne dla swoich czcionek: z okna konfiguracji na stronie Google Fonts skopiuj wartości font-family... ...i umieść je w zmiennych:
8. I to wszystko! Teraz możesz używać swoich czcionek, nadając selektorom w CSS odpowiednie wartości font-family, na przykład:

Użyj zmiennych, aby strona wykorzystywała wybrane przez Ciebie czcionki.

A co z wagami czcionek, które wybraliśmy podczas konfiguracji? Możesz użyć ich jako wartości właściwości font-weight, np. font-weight: 600;, w zależności od tego, jakie wagi zostały wybrane.

Jeżeli czcionki poszczególnych elementów zmienią się na te wybrane przez Ciebie, zadanie zostało wykonane prawidłowo :)

Uwaga: czasem czcionka może świetnie wyglądać na Google Fonts, ale na Twojej stronie już niekoniecznie. Nie zniechęcaj się tym, tylko eksperymentuj z różnymi krojami, aby znaleźć te właściwe. Może być też konieczne dostosowanie właściwości font-size lub letter-spacing (wyrażonej w pikselach), aby czcionka była czytelna.

Podsumowanie

Jeśli wszystko poszło dobrze, masz już gotową kartę walentynkową. Nie zapomnij jej wysłać 14 lutego, komu trzeba!

Kliknij guzik "Change View" i wybierz "Full Page View". Dzięki temu w adresie strony zmieni się fragment "/pen/" na "/full/", a Twój projekt wyświetli się na prawie całym oknie przeglądarki. U góry pozostanie tylko pasek tytułowy CodePena. Tak przygotowany adres strony jest gotowy do wysyłki.