Tworzymy proste animowane Sticky Note w CSS

Kategoria wpisu Frontend, Inspiracje, Kurs CSS Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Dzisiaj pokaże wam jak zrobić proste Sticky Note (karteczek z notatkami) jedynie z pomocą CSS. 

Będziemy tworzyć efekt taki jak na załączonej poniżej animacji:

See the Pen Sticky Note in CSS by Aura (@Julka85) on CodePen.0

Stworzenie kartek z notatkami w HTML

Zaczniemy od zbudowania struktury karteczek od stworzenia struktury w HTML. Moje karteczki zostaną oparte o strukturę listy – czyli podobnie jak np. menu na stronie internetowej.

W tej chwili karteczki to jedynie prosta lista w niczym nie przypominająca załączonej powyżej animacji. Dlatego naszym następnym krokiem będzie jej sformatowanie.

Formatowanie z CSS

Na początek zajmiemy się wyglądem i położeniem elementów. Jeżeli spojrzycie w kod animacji zobaczycie, że pisałam style w SCSS – jednak na potrzeby tego projektu przerobię go na zwykły CSS.

Sticky Note in CSS

Teraz z pomocą będziemy kolorować każdą z karteczek. Tak aby różniły się od siebie wyglądem.

Na potrzeby tego przykładu stworzyłam skrypt koloryzujący jedynie 4 karteczki. Dopisanie kodu do kolejnych nie powinno stanowić jednak większego problemu.

:nth-child() – to tzw. pseudo element z pomocą, którego możemy określić dokładnie, które dziecko, kolejny element bierzemy pod uwagę.

Teraz zajmiemy się nieco bardziej kłopotliwą kwestią czyli przechylimy nieco nasze karteczki.

W tej chwili karteczki są już ładnie pokolorowane – i obrócone nieco w różne strony. Nadal jednak są mało ciekawe i nie wykonują żadnych animacji.

Dlatego na początek zmienimy font (potocznie zwany elektroniczną czcionką). W tym celu skorzystamy z Google Fonts.

Font dodajemy do nadrzędnego elementu, w ten sposób wszystkie teksty zostaną nim napisane.

Animacje w CSS – :hover

Teraz do naszych karteczek dodamy animacje. Będą one odpalane po najechaniu kursorem myszy dlatego będzie nas interesował parametr :hover.

To oczywiście nie wszystko w tej chwili animacja niby działa, ale karteczki nie do końca ładnie się wyświetlają. Dlatego warto dodać kod:

Dzięki niemu karteczki przestaną się na siebie nawzajem nakładać.

 

A tak prezentuje się cały kod animacji w CSS

Podsumowanie:

Tak jak napisałam w tytule stworzyłam dosyć proste Sticky Note. Z pewnością można ten kod bardziej rozwinąć dodając rożne ozdobniki czy np. przyspieszyć animację.

Droga otwarta przed wami! Możecie spróbować sami rozwinąć ten kod. W razie pytań możecie je zadawać w komentarzu lub na FB.

 

See the Pen Sticky Note in CSS by Aura (@Julka85) on CodePen.0

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *