Na tym blogu spotkałeś się być może już z magią. Magią kreacji czegoś prawie z niczego. I dziś się nie zawiedziesz. Pokażę Ci jak zostało stworzone animowane logo w znanym serwisie dla dzieci - Buliba.pl. Wierna kopia logo tego portalu powstała dzięki kilku elementom HTML oraz możliwościom CSS3. Dodatkowo ten drugi nadał dynamikę i finalny efekt dostał do odegrania idealną rolę - ikony preloadera.
Jak wygląda oryginalne, statyczne logo w postaci obrazka?
Będziemy potrzebowali stworzyć literkę "b" (brzuszek i kreskę), oko z obwódką i refleksami oraz uśmiech. Kod HTML jest prosty i w zależności od etapu budowy będziemy potrzebowali wybrane tagi.
<div class="blogo"><b></b><i></i><u></u></div>
A docelowo będą to trzy tagi + kontener na nie. Fajnie by było użyć tagów B, UL, I, B, A, ale aż tylu nam nie potrzeba.
Zacznijmy abecadło od litery B.
Brzuszek utworzymy jako kółko. Czyli wykorzystamy właściwości border do stworzenia obwiedni oraz border-radius do zaokrąglenia narożników tak, aby powstał właśnie okrąg. Kreskę stworzymy dzięki pseudoelementowi :before, i tu również użyjemy border-radius, żeby prostokąt miał obłe krawędzie. Oczywiście literkę tworzymy z tagu B!
Jak widzisz słupek jest widoczny w środku kółka (wyżej być nie może, bo utworzyłaby się przestrzeń między nim, a kółkiem - przy lewej krawędzi obydwu). Póki co nie ma to znaczenia - i tak przykryje go oko.
Uwaga! Tip: Najeżdżając myszą na logo na każdym z etapów naszych zmagań, zobaczysz wyróżenie składowych elementów.
Skoro jest literka "b", to teraz pewnie z górki? Zobaczymy. Póki co, uśmiechnij się!
Uśmiech utworzymy z ramki okręgu stylizując element I. Ale są dwa pierwsze problemy. Jeden z nich to wycięcie łuku z mniej niż połowy kółka, a drugi to zaokrąglenie końców (pamiętaj, że nie tworzymy w SVG, nie ma więc możliwości skorzystania z właściwości stroke-linecap). Powoli, powoli! Łuk z połowy okręgu utworzymy z elementu o proprocji 2:1 (tu 50px x 25px), ustawiając tylko ramki lewą, prawą i dolną oraz border-radius tylko dla dolnych narożników - powstanie łuk.
"B" się uśmiechnęło, ale ubaw ma chyba zbyt wielki. Niestety trzeba ukrócić nieco te harce. Póki co jedyny sposób to zamaskowanie części łuku. Skoro mamy wolny pseudoelement :after w tagu B, to wykorzystajmy go.
A jak zaokrąglić ucięte krawędzie uśmiechu? Na końcach łuku dodać po prostu dwie kropki dzięki pomocy pseudoelementów.
Rzucisz jeszcze okiem na oko?
Tu chyba będzie prościej. Tworzymy kolejne kółko z białą ramką i czarnym tłem na tagu U. Oczywiście jest to kwadratowy element, ale analogicznie do powyższych zmieniamy go w okrąg ustawiając border-radius na 50% (każde zaokrąglenie będzie utworzone od połowy krawędzi do połowy sąsiedniej krawędzi, dzięki czemu utworzy idealny łuk o 90. stopniach z wycinka okręgu). Refleksy na oku tworzymy z dwóch pseudoelementów, podobnie jak kropki w uśmiechu.
Statyczne logo mamy gotowe. Teraz aby nadać mu wspomnianej dynamiki dodajmy rotację. Do tego wykorzystamy właściwość animation z ustawionymi dwiema klatkami: 0% - 0 stopni, 100% - 360 stopni. Reszta klatek będzie przeliczona automatycznie dzięki czemu zyskamy płynny obrót oka w czasie zgodnym z tym ustawionym we właściwości animacji.
Ostateczny kod CSS wygląda tak:
/* kontener */
div.blogo {
display:inline-block;
vertical-align:middle;
width: 74px;
height: 100px;
position: relative;
}
/* brzuszek b */
div.blogo b {
position: Absolute;
left: 0;
bottom: 0;
width: 74px;
height: 74px;
box-sizing: border-box;
border: 20px solid #fcb53e;
border-radius: 50%;
}
/* słupek b */
div.blogo b:before {
content: '';
position: absolute;
left: -20px;
top: -46px;
background: #fcb53e;
width: 24px;
height: 68px;
border-radius: 12px;
}
/* maska na uśmiech */
div.blogo b:after {
content: '';
display: block;
background: #fcb53e;
width: 66px;
height: 22px;
position: absolute;
left: -16px;
bottom: 3px;
z-index: 1;
}
/* oko */
div.blogo u {
display: block;
position: absolute;
left: 20px;
top: 46px;
width: 26px;
height: 26px;
background: #373535;
border: 4px solid #fff;
border-radius: 50%;
animation: rotating 2s linear infinite;
z-index: 2;
}
/* refleksy na oku */
div.blogo u:before,
div.blogo u:after {
content: '';
position: absolute;
width: 9px;
height: 9px;
background: #fff;
border-radius: 50%;
left: 2px;
top: 0;
}
/* duży refleks na oku */
div.blogo u:after {
left: 16px;
top: 19px;
width: 4px;
height: 4px;
}
/* połowiczny łuk uśmiechu */
div.blogo i {
position: absolute;
bottom: 7px;
left: 7px;
display: block;
height: 25px;
width: 50px;
border-bottom: 5px solid #ee3e3d;
border-left: 5px solid #ee3e3d;
border-right: 5px solid #ee3e3d;
border-radius: 0 0 50px 50px;
}
/* zakończenia uśmiechu */
div.blogo i:before,
div.blogo i:after {
content: '';
position: absolute;
left: -1px;
top: 12px;
display: block;
width: 5px;
height: 4px;
border-radius: 50%;
background: #ee3e3d;
z-index: 3;
}
/* prawe zakończenie uśmiechu */
div.blogo i:after {
left: 46px;
}
/* klatki animacji oka */
@keyframes rotating {
from{
transform: rotate(0deg) translate3d(0, 0, 0);
}
to{
transform: rotate(360deg) translate3d(0, 0, 0);
}
}
A logo tak:
A czy Ty lubisz kiedy wszystko idzie zgodnie z planem?
Przydatne linki:
Preloader w serwisie Buliba.pl
Animacje w CSS
Border-radius w CSS