🎨 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

UI | źródło

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