artykul-08-04-1313x579

Ciekawe efekty z wykorzystaniem CSS

Osobom pracującym przy stronach czy aplikacjach internetowych nie trzeba przedstawiać czym jest CSS. Kaskadowe arkusze stylów na przestrzeni lat mocno się rozwinęły i obecnie są potężnym narzędziem, dzięki któremu możemy uatrakcyjnić naszą stronę w ciekawe animacje, kolory czy efekty.

W dzisiejszym wpisie przedstawię kilka efektów, które wykonamy w czystym CSS, bez konieczności używania dodatkowych bibliotek, czy skryptów JS. Na końcu podrzucam darmowe i przydatne narzędzia, które możecie wykorzystać w swoich projektach. 

DARK MODE

Ciemny wygląd aplikacji kojarzy nam się często z aplikacjami mobilnymi. Popularne aplikacje takie jak messenger, gmail czy mapy już dawno otrzymały możliwość korzystania z ciemnego motywu.  Nic dziwnego, że go polubiliśmy. Ciemny motyw szczególnie wieczorem mniej męczy wzrok i sprawia, że czytanie treści jest bardziej komfortowe. 

Dark mode coraz częściej spotykamy na stronach internetowych. Dlatego nie czekaj już dłużej i zaplanuj wdrożenie ciemnego motywu na swojej stronie internetowej. 

Poniżej przykład zastosowania (tutaj niestety wymagana jest podstawowa znajomość javascript):

See the Pen [5 Lines] Dark Mode Toggle by Zed Dash (@z-) on CodePen.

Dostosowujemy wygląd przeglądarkowego scrollbara

Przygotowaliśmy piękny i estetyczny layout naszej strony. Wszystko się ze sobą komponuje, ale niestety pasek przewijania dalej jest szary i gruby. Nic straconego! Za pomocą CSS, możesz wpłynąć na wygląd paska przewijania w przeglądarce. 

Dla ułatwienia, podsyłam generator styli CSS, które zmieniają domyślny pasek przewijania:

See the Pen Custom Scrollbar Maker by Stephen Paton (@stephenpaton-tech) on CodePen.

Ładowanie elementów – spinner/progressbar

Szybkie strony internetowe zdecydowanie lepiej konwertują i na dłużej przyciągają odbiorców. Niestety, nie zawsze jesteśmy w stanie wszystko zoptymalizować, aby strona uruchamiała się w ułamku sekundy. 

Z pomocą przychodzą progress bary lub spinnery. Badania pokazują, że jeżeli pokażemy ile jeszcze zostało do wczytania elementu, odbiorca jest w stanie chwilkę dłużej poczekać. Najgorszy scenariusz to pusta strona i brak elementów. Wtedy mamy gwarancję, że odbiorca opuści stronę bez zastanowienia. 

Przykład spinnera


See the Pen Simple HTML & SVG Loading Spinners by Stephen Delaney (@sdelaney) on CodePen.

Przykład progress bara


See the Pen Only (S)CSS loading animation by Tobias Glaus (@tobiasglaus) on CodePen.

Ciekawsze nagłówki – skrolowanie tekstu

Nagłówek to element, który ma przyciągnąć wzrok i uwagę czytelnika. Poprawia czytelność tekstu oraz dzieli duże ściany tekstu na mniejsze. Poniżej przedstawiam sposób, jak dołożyć ciekawą animację do nagłówka. 

See the Pen Text animation by Yoann (@yoannhel) on CodePen.

To wszystko w dzisiejszym wpisie. Mam nadzieję, że te krótkie poradniki poprawią odbiór wizualny Waszych projektów. Jeżeli treści będą się podobać, to będę kontynuował taką serię wpisów. Na koniec podsyłam kilka ciekawych narzędzi, które pomogą w codziennej pracy. 

Bonus – darmowe i przydatne narzędzia:

Generator gradientów

https://uigradients.com/#Mild

https://www.grabient.com/?ml_subscriber=1694292060846167295

Generowanie palety pasujących kolorów

https://coolors.co/

Polecane biblioteki CSS

https://dev.to/chetan_atrawalkar/20-best-css3-library-for-developers-58p

Artykuł polecany dla Ciebie – Narzędzia do testowania stron internetowych

Udostępnij ten wpis

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Masz dla nas projekt?