Tworzymy proste animowane Sticky Note w CSS

W tym tutorialu pokażę jak zrobić bardzo proste Sticky Note (karteczek z notatkami) na stronę internetową, używając do tego jedynie HTML i CSS.

Będziemy tworzyć efekt taki jak na załączonej poniżej animacji. Jak widać efekt jest dość ciekawy i z pewnością znajdzie zastosowanie do różnych krótkich treści, ale nie tylko.

Stworzenie kartek z notatkami w HTML

Zaczniemy od zbudowania struktury, szkieletu „karteczek” w języku HTML. Jako, że karteczki mają stanowić jeden spójny połączony ze sobą element zdecydowałam, że do ich stworzenia użyję listy. Dzięki temu w przyszłości dodanie kolejnej nie powinno być skomplikowane. Analogicznie robi się np. z 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 punktowana 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;
}

Po użyciu tego kodu karteczki będą wyglądały następująco:

Jak widać każda z nich wygląda tak samo, jednak podzielone są one już na osobne elementy. By nadać im inne kolory musimy napisać dla nich odpowiedni kod CSS. Tak aby różniły się od siebie wyglądem.

.cards li:nth-child(0) div, .cards li:nth-child(4n) div {
  background: #cffdd5;
}

.cards li:nth-child(1) div, .cards li:nth-child(4n+1) div {
  background: #fdf5cf;
}

.cards li:nth-child(2) div, .cards li:nth-child(4n+2) div {
  background-color: #fdcfe4;
}

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

Na potrzeby tego przykładu stworzyłam skrypt koloryzujący jedynie na 4 kolory. Kolory te będą występować cały czas w tej samej kolejności. Chyba, że zdecydujecie się zmodyfikować ten kod i dopisać inne ustawienia.

:nth-child() – to tzw. pseudo element z pomocą, którego możemy określić dokładnie, które dziecko, kolejny element bierzemy pod uwagę. Zapis np. nth-child(4n) oznacza, że bierzemy pod uwagę co 4 element. 4n+1 to co 4 element + 1 (czyli kolejny następujący po 4 z kolei).

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

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

.cards li:nth-child(1) div, .cards li:nth-child(4n+1) div {
  background: #fdf5cf;
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}

.cards li:nth-child(2) div, .cards li:nth-child(4n+2) 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, .cards li:nth-child(4n+3) 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 dla karteczek 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(0) div:hover, 
.cards li:nth-child(0) div:focus {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
}

.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);
}

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.