Создание логотипа андроид Originally made by Diogo Corrêa

Создание логотипа андроид Originally made by Diogo Corrêa.

HTML Структура <div class="android"> <div class="head"> <div class="l_ant"></div> <div class="r_ant"></div> <div class="l_eye"></div> <div class="r_eye"></div> <div class="body"> <div class="l_arm"></div> <div class="r_arm"></div> <div class="l_leg"></div> <div class="r_leg"></div>

Разбор стилей. android{ height: 404 px; width: 334 px; margin: 100 px auto; }. head{ width: 220 px; height: 100 px; top: 32 px; border-radius: 110 px 0 0; -moz-border-radius: 110 px 0 0; -webkit-transition: all 0. 1 s ease-in; }

$Разбор стилей. l_eye, . r_eye { background: #fff; width: 20 px; height: 20 px;$

Разбор стилей. l_eye, . r_eye { background: #fff; width: 20 px; height: 20 px; position: absolute; top: 42 px; border-radius: 10 px; -moz-border-radius: 10 px; -webkit-border-radius: 10 px; }. l_eye {left: 50 px; }. r_eye {right: 50 px; }

$. l_ant, . r_ant{ width: 6 px; height: 50 px; position: absolute; top: -34$

. l_ant, . r_ant{ width: 6 px; height: 50 px; position: absolute; top: -34 px; border-radius: 3 px; -webkit-border-radius: 3 px; -moz-border-radius: 3 px; }. l_ant { left: 50 px; transform: rotate(-30 deg); -webkit-transform: rotate(-30 deg); -moz-transform: rotate(-30 deg); }. r_ant { right: 50 px; transform: rotate(30 deg); -webkit-transform: rotate(30 deg); -moz-transform: rotate(30 deg); } Разбор стилей

Разбор стилей. body{ width: 220 px; height: 184 px; top: 40 px; border-radius: 0 0 25 px; -webkit-border-radius: 0 0 25 px; -moz-border-radius: 0 0 25 px; }

$Разбор стилей. l_arm, . r_arm, . l_leg, . r_leg { width: 50 px; position:$

Разбор стилей. l_arm, . r_arm, . l_leg, . r_leg { width: 50 px; position: absolute; -webkit-transition: all 0. 1 s ease-in; }. l_arm, . r_arm { height: 150 px; border-radius: 25 px; -moz-border-radius: 25 px; -webkit-border-radius: 25 px; }

$Разбор стилей. l_leg, . r_leg { height: 80 px; top: 182 px; border-radius: 0$

Разбор стилей. l_leg, . r_leg { height: 80 px; top: 182 px; border-radius: 0 0 25 px; -moz-border-radius: 0 0 25 px; -webkit-border-radius: 0 0 25 px; }. l_arm {left: -58 px; }. r_arm {right: -58 px; }. l_leg {left: 45 px; }. r_leg {right: 45 px; }

Разбор стилей. head: hover { -webkit-transform: rotate(-5 deg) translate(-4 px, -8 px); -moz-transform: rotate(-5 deg) translate(-4 px, -8 px); }. l_arm: hover{ -webkit-transform: rotate(15 deg) translate(-14 px, 0); -moz-transform: rotate(15 deg) translate(-14 px, 0); }. r_arm: hover{ -webkit-transform: rotate(-30 deg) translate(30 px, 0); -moz-transform: rotate(-30 deg) translate(30 px, 0); }