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://www.grabient.com/?ml_subscriber=1694292060846167295
Generowanie palety pasujących kolorów
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