CSS

Wykonamy kilka ćwiczeń z flexboxem, aby zrozumieć jego podstawowe możliwości. Zamieniamy wiedzę teoretyczną i pewne nieuporządkowane podstawy w praktykę za pomocą kilku prostych ćwiczeń.

Poznajemy czym jest flexbox, flex-kontener i flex-dziecko. Uczymy się kiedy powinno się używać flexboxa, jakie mieć podejście do używania go oraz przede wszystkim – robimy mini-projekt z prostym paskiem nawigacyjnym z użyciem flexboxa. Do dzieła.

Napiszemy sobie 2 tzw. overlays na obrazku, w dodatku żeby było trudniej, obrazek będzie linkiem, zaś żeby było ciekawiej, obrazek będzie również absolutnie pozycjonowany. Do dzieła.

Bawimy się w pozycjonowanie absolutne względem rodzica – 4 kwadraty pod kątem składające się w całość. Uczymy się animować je symulując odpychanie się od siebie – za pomocą width i height (niezalecane) oraz za pomocą scale, które zwiększa rodzica, zachowując wielkość dziecka. Jeden wzór matematyczny do zapamiętania.

Gradient liniowy to bardzo ciekawa i w sumie prosta funkcja, która odpowiednio użyta może ulepszyć wygląd naszej strony. Technicznie nie jest to w żaden sposób skomplikowane, choć jeżeli nigdy z gradientów nie korzystaliśmy, mogą się one na początku wydawać odrobinę dziwne.

Uczymy się tworzyć kształt trójkąta za pomocą CSS. Poznajemy zmienne CSS oraz funkcję calc, za pomocą której napiszemy trójkąt o dowolnej wielkości. Do dzieła!

Tworzymy animację przesuwania się, która wykona się jeden raz i „zostanie”, nie wróci do pozycji początkowej, tylko zostanie tam, gdzie się skończyła. Poznajemy właściwość animation-fill-mode ustawioną na forwards.

Istnieją 4 główne funkcje, które możemy przekazać do transform (translate, rotate, scale oraz skew) + ich odpowiedniki dla konkretnych osi X i Y (a nawet osi Z czyli z-index). Korzystanie z transform jest bardzo dobre pod względem wydajności animacji, zaś korzystanie z właściwości pokroju width, height i tym podobne jest całkowitą przeciwnością i czymś, czego…

Nauczymy się robić animacje, które działają „w dwie strony” na przykładzie elementu, który rośnie i maleje. Zrobimy to korzystając z animation direction ustawionego na alternate, czyli tak, jak się to robić powinno, zamiast stosować różne obejścia.

Po poznaniu tej sztuczki czy raczej swego rodzaju wzorca i bezwzględnym przestrzeganiu go już nigdy nie zdarzy się nam dość częsta na różnych stronach sytuacja, w której mamy responsywność względem do pierwotnej wielkości okna, ale w momencie, gdy zaczynamy je zwężać i rozsuwać rzeczy blokują się nam na jakimś widoku i nie chcą wracać.

Bardzo prosta a zarazem ciekawa sztuczka, która zamienia znak plusa na znak zamykania (X) przy użyciu jednej ikony lub znaku + oraz transform rotate o 45 stopni. Genialne w swojej prostocie.

Uczymy się tworzyć kształt serca wykorzystując tylko CSS oraz pseudo-elementy before i after w kreatywny sposób. Podstawy bardziej zaawansowanego CSSa.