DIY #5 - Tworzymy logo Androida w CSS3 | DailyWeb.pl

DIY #5 - Tworzymy logo Androida w CSS3

Opublikowano 3 lata temu - 3


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:


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

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

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

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

.logo div {
    background-color: #a5c63b;
}

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:

.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;
}

1

Teraz dodajmy jej trochę szczegółów:

/*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);
}

2

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:

.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;
}

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

3

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

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

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

    .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;
}

Mamy naszego zielonego robocika!:

4

 

 

Dodajmy mu jeszcze animację po najechaniu myszką:

/*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);
}

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