🎨 uxowy.dev #61
3 min czytania

🎨 uxowy.dev #61

dziś mam dla Ciebie troszkę UI'owej inspiracji. 🧑‍🎨 Co ciekawe, większość z nich nie wymaga żadnych frameworków i JS'ów. Tylko w jednym przykładzie użyty jest React (aby dynamicznie wygenerować losowy ciąg znaków). Reszta to CSS.

Zobacz, jak zrobić:

  • efekt zmieniającego się słowa w tytule
  • ciekawy efekt tła z użyciem gradientów
  • efekt odszyfrowania tekstu
  • zaszumione tło
  • nieskończony slider z logami / ikonami
  • efekt animowanego gradientu na tekście

CSS'owa inspiracja UI'owa dla developera

Przykłady pochodzą z bloga Senior Front-End Developera Julien Thibeaut, na którego ostatnio wpadłem.

I muszę Cię zmartwić. Nie zamieszczę w mailu gotowych kodów źródłowych (choć zajmują czasami parę linijek).

Dlaczego? A żeby uszanować pracę autora włożoną w tworzenie contentu. Mam nadzieję, że zrozumiesz i nie będzie to dla Ciebie duży problem.

👉 Aby zobaczyć kod źródłowy, kliknij po prostu w obrazek. Zostaniesz przekierowany(/a) na stronę, na której jest kod + wyjaśnienie, jak on działa.

Startujemy:

1.  Efekt zmieniającego się słowa w tytule

Zastosowane: CSS lub Tailwind CSS. Źródło

2. Ciekawy efekt tła z użyciem gradientów

Zeszyt w kratkę? 😂 Proszę bardzo. Zastosowane: CSS lub Tailwind CSS. Źródło
W kropki? OK. Zastosowane: CSS lub Tailwind CSS. Źródło
A może jakieś gradientowe? Źródło

3. Efekt odszyfrowania tekstu

Użycie: React. Źródło

4. Zaszumione tło

Zastosowane: CSS + inline SVG jako źródło szumu. Źródło

5. Nieskończony slider z logami / ikonami

Użycie: React do loopa ikon, CSS lub Tailwind CSS do animowania. Żródło

6. Efekt animowanego gradientu na tekście

Użycie: CSS lub Tailwind CSS. Źródło

🎨
Zapodaj info o tym newsletterze swoim ziomkom! Na pewno im też przyda się trochę wiedzy o UI/UX dla developera! A ja będę bardzo wdzięczny, że dzięki Tobie to, co robię dociera do większej ilości osób!
Skopiuj link: https://uxowy.dev/. Dzięki!!!

To wszystko na dziś!
Dobrego weekendu! 🎊

Mikołaj Waśkowski
uxowy.dev


Poprzednie wydania:

Jeśli jeszcze nie ma Cię na liście 🤔

Wysyłamy jeden email tygodniowo, w każdy piątek, o godz. 12:00.
Wartościowa wiedza o UI/UX dla developera może wylądować do Twojej skrzynki.