Jak stworzyć animowane jajka pisanki za pomocą HTML i CSS?

Zbliżają się święta. To dobra okazja, by zrobić dla was krótki tutorial z kształtów w CSSie na przykładzie jajek i pisanek stworzonych tylko za pomocą HTML i CSS. Tutorial zaczyna się od zupełnych podstaw. Po czym wprowadzane są coraz trudniejsze elementy. Miłej zabawy!

Kształt jajka w CSS krok po kroku

1) Prostokąt CSS
Tworzymy plik HTML zawierający znacznik div z klasą dla naszego jajka (u mnie class=”egg”) w pliku CSS ostylowujemy div tak, by pojawił się prostokąt:

2) Elipsa
Z prostokąta łatwo zrobimy owal / elipsę korzystając z właściwości border-radius:

3) Jajko w CSS
Niestety, jajko nie jest idealnie owalne – ma zazwyczaj dół szerszy niż górę. W związku z tym warto przyjrzeć się właściwości border radius.

Możemy ustawić różne wartości w zależności od tego, który z rogów prostokąta chcemy zmienić np. border-radius: 60% 60% 40% 40% (pierwsza wartość dotyczy górnego lewego rogu, druga wartość dotyczy górnego prawego, trzecia dolnego lewego rogu, a czwarta to wartość dolnego prawego rogu. Wbrew pozorom jeżeli tak ustawicie właściwość border-radius nie uzyskacie jajka.

Blisko… ale jajkiem to to nie jest 😉

Przyda się tutaj składnia ze slashem, która definuje proporcje zaokrąglenia.

Używając proporcji:
border-radius: 60px/45px;
chcemy uzyskać zaokrąglenie 60px po szerokości i 45px na wysokości.

Można wyobrazić sobie zaokrąglenie rogu jako ćwiartkę elipsy o właśnie takich półosiach.

CSS border-radius składnia ze slash

Zostawiam was z kilkoma praktycznymi przykładami:

Wykorzystamy powyższą wiedzę do stworzenia jajka:
border-radius: 50%/60% 60% 38% 38%.
Znaczy dokładnie to samo co:

border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;
border-bottom-right-radius: 50% 38%;
border-bottom-left-radius: 50% 38%;

4) Skorupka
Kształt jajka zrobiony w CSS mamy, więc dodajemy mu kolor skorupki
np. background: #FBE9E7;

Ozdabianie pisanki

5) Dodajemy paski przy pomocy grida
Czas pomalować jajo w paski!

Chcę, by moja pisanka miała dokładnie 5 poziomych pasków, dlatego w HTML wewnątrz jajka (div o klasie „egg”) umieszczę 5 divów o klasie „stripe”. W CSS paska dodaję tylko właściwość border-top.

Chcę mieć 5 równych pasków. Oczywiście mogłabym policzyć, że pisanka ma wysokość 200px, więc każdy pasek powinen mieć ustawiony height: 40px, ale jestem leniwa 😉 Stąd dzielę jajko na wiersze o wysokości dokładnie 20% całości i wykorzystam do tego właściwość:
display: grid;

oraz ustawię:
grid-template-rows: repeat(5, 20%);.

Niestety, gdyby tak zostawić pisankę powstało by uwięzione jajko za kratkami 😉 Konieczne jest dodanie właściwości overflow: hidden; .
Nasze jajko prezentuje się następująco:

Jeżeli marzą wam się paski pionowe wystarczy zmienić grid-template-rows na grid-template-column i nie zapomnieć, że teraz dla pojedyńczego paska chcemy zaznaczać border left lub right.

Zauważycie, że grid-template-rows: repeat(5, 20%);
– zadziała w tym przypadku tak samo jak: grid-template-rows: 20%;.
Spróbuj:
grid-template-rows: 35%; oraz
grid-template-rows: repeat(5, 35%);
Widać różnicę?

6) Kolorowanie pasków przy pomocy selektora :nth-child()
Co bystrzejsze oko pewnie zauważyło, że pierwszy pasek mając właściwość border-top oszpeca naszą pisankę. Pozbądźmy się nadmiarowej kreski za pomocą selektora :first-child.

.stripe {
    border-top: 2px solid #ccc;
}

.stripe:first-child {
    border-top: none;
}

Nie wygląda to za dobrze prawda? Najpierw każemy coś narysować potem usuwamy. Niby ok, ale można też użyć selectora :not :

.stripe:not(:first-child) {
    border-top: 2px solid #ccc;
}

Za pomocą właściwości :nth-child() możemy dowolnie pokolorować naszą pisankę. Moja będzie pastelowa:

Właściwie nie podoba mi się, że pisanka ma szare obramowanie – już nie jest nam do niczego potrzebne. Za to wewnętrzne paski za to chcę mieć białe:

Mogłabym założyć, że na tę chwilę jajko mnie całkiem zadowala, ale czemu by nie mieć dwóch pisanek?

Dwie pisanki

Skopiujemy cały znacznik html zawierający jajko i zamkniemy dwa jajka razem jako div eggs:

Jajka jak widać nie chcą stać koło siebie. Zrobimy więc kilka zmian, które je do siebie przekona.
Usuniemy display:grid, a użyjemy display: inline-block.
Wysokość jajka przeniesiemy po prostu do klasy stripe jako 20% wysokości.
Na koniec w nadrzędnej klasie eggs dodamy wypośrodkowanie elementów.

Chcemy rozróżnić prawe jajko od lewego w ten sposób:

Następnie przemalujemy jajko prawe za pomocą wzoru w svg:

Jajka jakoś sztywno stoją, mogły by być pochylone, prawda?
Pomoże nam w tym transform: rotate():

Możemy pisanki jeszcze wprawić w ruch – wykorzystamy animację CSS. W tym celu musimy utworzyć reguły @keyframes, które będą przechowywały zachowanie animacji.

Użycie animacji keyframe wymaga stworzenia swojej reguły wraz z przynajmniej dwoma stanami/zachowaniami na 0% i 100%:

@-webkit-keyframes nazwa {
    0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes nazwa {
    0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframesnazwa {
    0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes nazwa {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

następnie animację używamy w kodzie:

.element {
  -webkit-animation: nazwa 3s infinite;
  -moz-animation: nazwa 3s infinite;
  -o-animation: nazwa 3s infinite;
   animation: nazwa 3s infinite;
}

O keyframes możecie poczytać więcej tutaj.

Na koniec dodajmy tło i może jakiś tytuł (znacznik h1). Skorzystamy z darmowych fontów googlowych. Oprócz tego dodamy biały cień pod literami.

Ostatecznie jajka pisanki prezentują się tak:

Jak wam się podobają?
Zachęcam do dalszej zabawy z HTML i CSS, jestem ciekawa waszych efektów. Pochwalcie się w komentarzu!