10 fajnych codepenów dla relasku i inspiracji. Nie pożałujesz.

W tym wpisie możesz nacieszyć się kunsztem kilku utalentowanych Developerów. Codepen’y które łączą sztukę i kod!

Czego się dzisiaj dowiesz?

Paradoksalnie bardzo dużo. Zobaczysz jakie cuda niektórzy robią na front-endzie. Postaram się aby wybrane Codepen’y pokazywały różne techniki kodzenia.

Dlaczego to piszę?

Ostatnio zapętliłem się w serii technicznych wpisów które pisze się wieczność! Generalnie są to (chyba 😛 ) wartościowe materiały ale potrzebne jest tu coś lekkiego. Przyjemnego. Wręcz zwiewnego. Jak wiosenne suknie Naszych ukochanych Pań 🙂

4 pory roku

Skoro już wspomniałem o wiośnie, zobacz jak niewiele czasu już do niej zostało! Przynajmniej na tej świetnej wektorowej animacji:

See the Pen Animated CSS Seasons by agathaco (@agathaco) on CodePen.

Paralaksa na kursorze

Jestem fanem paralaksy “artystycznej” i nawet w swoim czasie trochę o tym pisałem. Tutaj jest coś co w sumie mi do głowy nie przyszło 🙂 Subtelna paralaksa na ruch myszą:

See the Pen Mouse-Based-Parallax Sunset by Adam Quinlan (@quinlo) on CodePen.

Usuwanie elementów z listy

Bo nie trzeba być ciągle nudnym? Ja wiem, że Material Design i te sprawy no ale spójrz tylko na to:

See the Pen Slice list items by Aaron Iker (@aaroniker) on CodePen.

Wirtualne Miasto

Chcesz dostać pierwszą pracę jako Developer? Chcesz mieć w portfolio jakąś gierkę? Zapomnij o Snake’u… Stwórz SimCity 😛

See the Pen 3D Emoji Town (Pure CSS) by George W. Park (@GeorgePark) on CodePen.

Escape Room

Tak sobie pomyślałem… Jakbyś kiedyś robił/a stronę dla Escape Roomu może warto rozważyć użycie Three.js?

See the Pen Thank You. by Liam Egan (@shubniggurath) on CodePen.

Czas do szkoły!

Co za czasy! Już nawet zeszyty się robi w CSS’ie. Czego ja dożyłem…

See the Pen Pure CSS Moleskine Notebooks by Olivia (@oliviale) on CodePen.

Kolorowanki XXI wieku

Podobno dzieci w tych czasach są inteligentniejsze. Od małego obsługują smartfony itp. Już nawet zwykłe kolorowanki się są żadnym wyzwaniem. Teraz robi się to tak:

SVG Mask w akcji

See the Pen Interactive SVG mask w/full screen image by Craig Roblewsky (@PointC) on CodePen.

Ciężkie jest życie Księcia…

A mówili zostań Księciem! Może nie do końca mi się udało ale swojej Księżniczki szukam w iście książęcym stylu. Jest na szczycie tej wieży:

See the Pen Only CSS: Infinite Steps by Yusuke Nakaya (@YusukeNakaya) on CodePen.

Kiedy nie biegnę po schodach…

To wyglądam dokładnie jak ten robaczek 🙂 Mój ulubiony tryb to “NAILING IT”:

See the Pen Animated status indicator by Bård N Hovde (@bnhovde) on CodePen.

Tymczasem w lesie

Jestem fanem poligonalnych grafik ale to… Jak ktoś w ogóle na to wpadł? Do tego jeszcze zakodził:

See the Pen Low poly animals by Mikael Ainalem (@ainalem) on CodePen.

Podsumowanie

To by było na tyle tej sztuki na dzisiaj. Przynaj, niektórzy developerzy są po prostu niesamowici. Chciałbyś kiedyś osiągnąć taki skill?

Jeszcze jedna prośba 🙂 Napisz czy powinienem czuć się jak dzban kiedy porównuje moje drętwe “Codepeny” z rozmaitych artykułów do tych dzieł sztuki?

Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?