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.

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:

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.

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

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%:

następnie animację używamy w kodzie:

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!

Zobacz także:
Jak zostać front-end developerem? – kompendium wiedzy
Kurs wideo: Front-end: od podstaw do technik zaawansowanych w 15 dni
5 aplikacji na telefon, które uczą programować