W poniższym zestawieniu przedstawimy Wam zbiór pożytecznych efektów w CSS, które przykuły naszą uwagę w 2019 roku. Większość początkujących webdevów lub osoby zaczynające swoją przygodę z kodowaniem widząc ciekawy, płynnie działający i dobrze skomponowany ze stroną efekt wizualny myśli sobie – “Kurczę, ale to fajne! Pewnie trudno coś takiego napisać samemu…”. Nic bardziej mylnego ! Znajomość CSS oraz rozwinięta wrażliwość estetyczna zupełnie wystarczą w osiągnięciu miłych dla oka animacji, a nie wymaga to importowania dodatkowych (i często zasobożernych) bibliotek czy nauki nowego języka.

Wszystkie przykłady zawarte w tym wpisie zostały napisane przez ich twórców w czystym CSS, tak więc bez problemu większość z Was będzie w stanie zastosować je we własnych projektach.

Stylowanie tekstu – mieszanie z tłem

Bardzo efektowny i popularny w ostatnim czasie efekt, który miesza kolor tekstu z kolorem elementu HTML, który znajduje się pod nim. W ten sposób można np. wypełnić tekst tłem, które umieścimy w warstwie bezpośrednio pod nim, tak jak na załączonym przykładzie.

See the Pen
CSS Knockout Text
by Preethi Sam (@rpsthecoder)
on CodePen.

Animacja hover na boxie

Bardzo eleganckie zastosowanie stylowania w celu wyświetlenia ukrytej treści. Efekt rozwijania opisu karty z animacją koloru podświetlenia z pewnością doda szyku każdej stronie internetowej.

See the Pen
CSS Card Hover Effects
by Jhonier Riascos Zapata (@Jhonierpc)
on CodePen.

Animowany obrazek w css

Poniższy przykład to ciekawe zastosowanie animacji poklatkowej, którą można sterować dyrektywami arkusza styli. Animacja polega na stworzeniu tzw. ‘sprite’ z obrazków, które mają tworzyć spójną animację poklatkową. W pliku CSS tworzymy przesunięcie obrazka wzdłuż wybranej osi X lub Y o zadaną wartość stwarzając wrażenie ruchomego obrazka.

Ogromną zaletą tego rozwiązania jest możliwość tworzenia animacji bez znajomości Javascriptu czy technologii flash. Niestety, aby tworzyć personalizowane animacje warto znać program graficzny typu Adobe Photoshop lub Illustrator.

See the Pen
CSS Animation with steps()
by Guil H (@Guilh)
on CodePen.

Animowane przyciski CTA (call-to-action)

Zestaw kilku mocno przyciągających wzrok przycisków akcji, czyli tzw. CTA – wezwanie użytkownika do działania. Świetny element do zastosowania na Landing Page’ach, stronach promujących produkt czy jako button nawiązujący do subskrybcji.

See the Pen
CSS Animations: Obvious CTA Buttons
by Olivia Ng (@oliviale)
on CodePen.

Przycisk z efektem 3D

Miły dla oka efekt 3D do buttona wraz z animacją na hover. Przy dobrej konfiguracji kolorów przycisk będzie idealny do prostych i eleganckich serwisów jak również do indywidualnych i pełnych kolorów projektów.

See the Pen
3D Button
by Katherine Kato (@kathykato)
on CodePen.

Proste menu typu harmonijka

Bardzo praktyczne i proste menu pionowe z ikonami biblioteki font-awesome oraz prostymi animacjami.

See the Pen
Awesome accordion menu using only HTML & CSS
by Ahmad Emran (@ahmadbassamemran)
on CodePen.

Animowane ikony hamburger menu

Świetnie prezentujące się ikony sterujące menu w formacie SVG. Rozbudowane animacje zwijania i rozwijania na pierwszy rzut oka sugeruje użycie zaawansowanych bibliotek JS, jednak w poniższych przykładach żadnych nie znajdziecie!

See the Pen
Flippin’ juicy burgers
by Mikael Ainalem (@ainalem)
on CodePen.

Stylowanie checkboxów i przycisków jednokrotnego wyboru

Pozycja dla bardziej zaawansowanych amatorów CSS. Mocno rozbudowane, przemyślane stylistycznie i zakodowane na solidnym poziome. Przedstawiony przykład to wzorcowy przykład stylowania elementów formularza czy ankiety, który swoją prezencją bez wątpienia przykuje uwagę wielu osób (tak jak i naszą!).

See the Pen
Checkboxes and radios (dark/light) – pure css – #06
by Ivan Grozdic (@ig_design)
on CodePen.

Preloader – animacja ładowania treści

Na koniec przedstawimy Wam dwa przykłady atrakcyjnych preloaderów do użycia na stronie czy sklepie internetowym. Przy dużym obciążeniu serwera ładowanymi zasobami – duża ilością zdjęć, filmikami czy animowanymi obrazkami – jednym z szeroko stosowanym rozwiązaniem jest użycie preloadera, czyli animacji, która sugeruje użytkownikowi, że zawartość strony jest w trakcie ładowania. Jeśli jest to odpowiednio skonfigurowane, po załadowaniu całej treści i mediów preloader znika i pojawia się gotowy do eksplorowania serwis www. Warto pamiętać o takim rozwiązaniu, które może znacząco wpłynąć na procent odrzuceń/wyjść użytkowników ze strony.

See the Pen
Pure CSS Book Loader
by Aaron Iker (@aaroniker)
on CodePen.

See the Pen
CSS Loading Animations
by Alex (@AlexWarnes)
on CodePen.

Mamy nadzieję, że powyższe zestawienie znajdzie wasze uznanie i będziecie oczekiwać kolejnych wpisów tego typu w najbliższym czasie.

Odwiedź nas na Facebooku i Instagramie,
-BSIDEWORK Team #innowacjewpraktyce