Tworzymy proste animowane Sticky Note w CSS bez użycia JavaScript

Czas czytania: 4 minut

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:

Co znajdziesz w tym wpisie

1 Stworzenie kartek z notatkami w HTML
2 Formatowanie z CSS
3 Animacje w CSS – :hover

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.

<ul class='cards'>
  <li>
    <div>
    <h4>Title 1</h4>
    <p>Text in box</p>
    </div>
  </li>
  <li>
    <div>
    <h4>Title 2</h4>
    <p>Text in box</p>
       <p>Text in box</p>
    </div>
  </li>
    <li>
    <div>
    <h4>Title 3</h4>
    <p>Text in box</p>
       <p>Text in box</p>
    </div>
  </li>
    <li>
    <div>
    <h4>Title 4</h4>
    <p>Text in box</p>
    </div>
  </li>
</ul>

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.

.cards{
  list-style:none;
}
.cards li {
  float: left;
  margin: 1em;
}
.cards li div {
  width: 200px;
  height: 200px;
  background: #ccc;
  padding: 10px;
  box-shadow: 2px 2px 2px #ccc;
  transition-duration: 0.5s;
  z-index: 1;
}
.cards li div h4 {
  font-size: 18px;
}
.cards li div p {
  font-size: 15px;
  font-weight: normal;
}

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

.cards li:nth-child(1) div {
  background: #cffdd5;
}

.cards li:nth-child(2) div {
  background: #fdf5cf;
}

.cards li:nth-child(3) div {
  background-color: #fdcfe4;
}

.cards li:nth-child(4) div {
  background-color: #cfeafd;
}

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.

.cards li:nth-child(1) div {
  background: #cffdd5;
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
}

.cards li:nth-child(2) div {
  background: #fdf5cf;
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}

.cards li:nth-child(3) div {
  background-color: #fdcfe4;
  -webkit-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

.cards li:nth-child(4) div {
  background-color: #cfeafd;
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
}

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.

@import url("https://fonts.googleapis.com/css?family=Shadows+Into+Light");
.cards {
  list-style: none;
  font-family: 'Shadows Into Light', cursive;
}

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.

.cards li:nth-child(1) div:hover, 
.cards li:nth-child(1) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}

.cards li:nth-child(2) div:hover, 
.cards li:nth-child(2) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}

.cards li:nth-child(3) div:hover, 
.cards li:nth-child(3) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}

.cards li:nth-child(4) div:hover, 
.cards li:nth-child(4) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}

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:

.cards li div:hover, 
.cards li div:focus {
  z-index: 1000;
  position: relative;
}

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

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

@import url("https://fonts.googleapis.com/css?family=Shadows+Into+Light");
.cards {
  list-style: none;
  font-family: 'Shadows Into Light', cursive;
}
.cards li {
  float: left;
  margin: 1em;
}
.cards li div {
  width: 200px;
  height: 200px;
  background: #ccc;
  padding: 10px;
  box-shadow: 2px 2px 2px #ccc;
  transition-duration: 0.5s;
  z-index: 1;
}
.cards li div:hover, 
.cards li div:focus {
  z-index: 1000;
  position: relative;
}
.cards li div h4 {
  font-size: 18px;
}
.cards li div p {
  font-size: 15px;
  font-weight: normal;
}
.cards li:nth-child(1) div {
  background: #cffdd5;
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
}
.cards li:nth-child(1) div:hover, 
.cards li:nth-child(1) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}
.cards li:nth-child(2) div {
  background: #fdf5cf;
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}
.cards li:nth-child(2) div:hover, 
.cards li:nth-child(2) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}
.cards li:nth-child(3) div {
  background-color: #fdcfe4;
  -webkit-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.cards li:nth-child(3) div:hover, 
.cards li:nth-child(3) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}
.cards li:nth-child(4) div {
  background-color: #cfeafd;
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
}
.cards li:nth-child(4) div:hover, 
.cards li:nth-child(4) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}

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.

Aurelia Sypniewska

W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.

Stworzenie kartek z notatkami w HTML

Formatowanie z CSS

Animacje w CSS – :hover

Share this:

Podobne