DIY #5 – Tworzymy logo Androida w CSS3

Rozkręcam się na dobre. Za nami już 4 odcinki serii. Przed wami natomiast kolejna część Do It Yourself a w niej pokażę wam moją wizję na stworzenie loga systemu Android przy użyciu CSSa. Mam nadzieję, że przypadnie Wam do gustu, oto ona:

Będziemy potrzebować:

• Głowy
• Antenek
• Oczu (:before i :after Głowy)
• Korpusu
• Rąk
• Nóg

Tworzymy monstrum :)

Nie ma na co czekać! Do dzieła:

[html]

<div class="logo">
<div class="glowa">
<div class="lewa-antenka"></div>
<div class="prawa-antenka"></div>
</div>
<div class="korpus">
<div class="konczyna lewa-reka"></div>
<div class="konczyna prawa-reka"></div>
<div class="konczyna lewa-noga"></div>
<div class="konczyna prawa-noga"></div>
</div>
</div>

[/html]

Proporcje logo bierzemy z… logo Androida :) Żeby było ładnie widoczne zróbmy 334px szerokości i 452px wysokości.

[css]
.logo {
width: 334px;
height: 452px;
margin: 0 auto;
margin-top: 90px;
position: relative;
}
[/css]

Wszystkie elementy (div) w logo niech będą zielone:

[css]
.logo div {
background-color: #a5c63b;
}
[/css]

I stała się zieleń!

Zacznijmy od głowy. Szeroka na 100% nadrzędnego kontenera, zaokrąglamy górne ranty i dajemy pozycję relatywną żebyśmy mogli odpowiednio ustawić oczy i antenki:

[css]
.glowa {
width: 100%;
position: relative;
height: 154px;
border-top-right-radius: 200px;
border-top-left-radius: 200px;
-moz-border-top-right-radius: 200px;
-moz-border-top-left-radius: 200px;
-webkit-border-top-right-radius: 200px;
-webkit-border-top-left-radius: 200px;
}
[/css]

Teraz dodajmy jej trochę szczegółów:

[css]
/*lewe oko*/
.glowa:before {
content: ”;
width: 30px;
height: 30px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-color: #F4F7F5;
left: 80px;
top: 66px;
}
/*prawe oko*/
.glowa:after {
content: ”;
width: 30px;
height: 30px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-color: #F4F7F5;
right: 80px;
top: 66px;
}
/*antenki*/
.lewa-antenka, .prawa-antenka {
position: absolute;
width: 9px;
height: 80px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
top: -20px;
}
.lewa-antenka {
left: 60px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.prawa-antenka {
right: 60px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
[/css]

Oczy to zwykłe zaokrąglone :before i :after odpowiednio usytuowane na głowie – żadna filozofia:) Antenki natomiast to prostokąty z zaokrąglonymi rantami, które obracamy o 30 stopni i ustawiamy w odpowiednim miejscu. Na antenkach nie musimy już ustawiać zielonego koloru tła ponieważ wszystkie divy wewnątrz loga już go mają.

Teraz pozostaje nam przywrócić robota do stanu sprzed dekapitacji – stylujemy korpus:

[css]
.korpus {
width: 100%;
height: 284px;
position: relative;
margin-top: 10px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-bottom-left-radius: 50px;
-moz-border-bottom-right-radius: 50px;
}
[/css]

Podobnie jak w przypadku głowy: zaokrąglamy 2 rogi i dodatkowo oddalamy go o 10px od głowy.

Logo androida ma wszystkie kończy jednakowych rozmiarów. Zamiast powtarzać CSS będziemy powtarzać klasę .konczyna, w której ujmiemy wszystkie powtarzalne style:

[css]
.konczyna {
width: 77px;
height: 233px;
position: absolute;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
}
[/css]

Mając gotowe kończyny pozostaje nam je odpowiednio umiejscowić (można też ręce lub nogi zrobić na :after i :before) :

[css]
.lewa-reka, .prawa-reka{
top: 0;
}
.lewa-reka {
left: -95px;
}
.prawa-reka {
right: -95px;
}
.lewa-noga, .prawa-noga{
bottom: -138px;
}
.lewa-noga {
left: 70px;
}
.prawa-noga {
right: 70px;
}
[/css]

Mamy naszego zielonego robocika!:

Dodajmy mu jeszcze animację po najechaniu myszką:

[css]
/*transformacje*/
.logo *, .logo *:after, .logo *:before {
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.logo:hover .glowa {
-webkit-transform: translate(-4px, -5px) rotate(-5deg);
-moz-transform: translate(-4px, -5px) rotate(-5deg);
-ms-transform: translate(-4px, -5px) rotate(-5deg);
-o-transform: translate(-4px, -5px) rotate(-5deg);
transform: translate(-4px, -5px) rotate(-5deg);
}
.logo:hover .glowa:after {
height: 2px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
[/css]

Odchylamy głowę o 5 stopni i zwężamy prawe oko. Żeby efekt był bardziej realistyczny prawe oko też powinniśmy obrócić o 5 stopni (lewego nie musimy bo przecież jest okręgiem :) ).

Gotowy efekt możecie znaleźć tutaj.

Zapraszam również na wcześniejsze części:

DIY #4 – Jak samemu zrobić logo Chrome w CSS3

DIY#3 – Elementy menu zawsze wyjustowane na całej szerokości kontenera

DIY#2.5 – Custom checkbox i radio button – tylko CSS

DIY#2 – Custom checkbox i radio button – na obrazkach

DIY#1 – Selektor plików