CSS

Bardzo szybki JS – znikający przycisk z Web Animations API

Piszemy z Web Animations API event przycisku, który po wciśnięciu znika na krótką chwilę, po czym pojawia się znowu. Idealne do różnego rodzaju przycisków kopiowania. Wykorzystamy właściwość CSS filter z funkcją opacity oraz Web Animations API.
Bardzo szybki JS – invalid input shake przy każdym złym znaku

Web Animation API sprawia, że animacje tworzy się w JavaScript bardzo łatwo, szybko i w dodatku lepiej to się komponuje z kodem niż tradycyjne animacje w CSS. Zrobimy „invalid input shake”, ale taki, który działa za każdym wciśnięciem nieprawidłowego przycisku.
Bardzo szybki CSS – tworzymy półkole

Kolejna umiejętność, jaką powinniśmy posiadać, to efektywnie tworzenie półkola. Przyda się w wielu elementach – choćby animacjach ładowania z obracającym się kółkiem.
Bardzo szybki CSS – centrowanie elementu div

To już klasyka i podstawy podstaw, które powinniśmy zapamiętać (niezależnie czy używamy Bootstrapa, czy flexboxa albo grida – te podstawy trzeba znać) – centrowanie elementu div w pionie i poziomie aby znajdował się idealnie w centrum ekranu.
Bardzo szybki CSS – before i after (pseudo-elementy)

Umiejętność korzystania z pseudo-elementów before i after może okazać się konieczna, aby pisać nowoczesny CSS i w pełni wykorzystać możliwości kaskadowych arkuszy stylów. Warto też znać funkcję 'attr’, która potrafi być swego rodzaju ułatwieniem.
Bardzo szybki CSS – dynamiczny pasek ładowania

Pracujemy na znalezionym w internecie kodzie. Zamieniamy animację paska ładowania na dynamiczny pasek ładowania. Odkrywamy, że funkcja 'attr’ nie jest w stanie zawsze nas poratować, ale są inne rozwiązania, takie jak wstrzykiwanie zmiennych CSS na przykład.
Bardzo szybki CSS – wyciemnienie obrazka na hover

Zrobienie wyciemnienia obrazka po najechaniu na niego myszką jest w dzisiejszych czasach banalnie proste. Wykorzystamy pseudo-selektor :hover oraz właściwość filter z odpowiednio ustawionym brightness. Pamiętajmy też o właściwości transition na animowanym elemencie – nie chcemy, aby efekt zadziałał od razu.
Bardzo szybki CSS – hacky text fill

Omawiamy kolejne rozwiązanie znalezione w internecie. Tym razem – efekt wypełnienia tekstu innym kolorem po najechaniu myszą. Nie jest to najlepsze rozwiązanie do efektu text-fill, ale pokazuje kilka ciekawych konceptów, więc je sobie omówimy.
Bardzo szybki CSS – invalid input shake

Nauczymy się tworzyć atrybut pattern dla elementów input, pisać animacje oraz poznamy pseudo-klasę invalid. Nauczymy się też przeszukiwać internet w celu odnajdywania nowych, dobrych rozwiązań dla naszego CSS.
Bardzo szybki CSS – transition i opóźnienie animacji

To już podstawy podstaw animowania elementów, ale dla kronikarskiego obowiązku o tym wspominam. Tworzymy animację pseudo-klasą hover, która ma się wykonywać płynnie, z pewnym opóźnieniem – różnym dla każdej animowanej właściwości, jeżeli trzeba.
Bardzo szybki CSS – animacja podkreślenia

Tworzymy animację podkreślenia wykorzystując pseudoelement ::after, pseudoklasę :hover oraz właściwość transition-origin. Jest to łatwiejsze, niż nam się wydaje. Świetny wstęp do dalszych, bardziej zaawansowanych animacji.
Bardzo szybki CSS – tooltip

Zapomnijmy o obiektowym JS, event-listenerach na 'mouseenter’ i 'mouseleave’, customowych komponentach z shadow-rootem albo zewnętrznych biblioteczkach – wykorzystując nowości CSS możemy sami napisać tooltip bardzo szybko.