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
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.
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ą.