Как создать Android-робота при помощи CSS?!

Андроид

Если вам всегда хотелось нарисовать что-либо с помощью CSS, тогда это руководство по созданию Android-робота может быть использовано как кикстарт вашего собственного творчества. В этом уроке мы создадим “Droid” робота, используя HTML и CSS.

Во-первых, нам нужно создать базовою структуру для нашего Дрюши. Для этого нам понадобятся основные HTML-теги div. Нужно разбить Дрюшу на разделы и присвоить каждому из них свой div:

 <div id="android">
        <div id="antenna">
            <div id="left_antenna"> </div>
            <div id="right_antenna"> </div>
        </div>
            <div id="head">
            <div id="left_eye"> </div>
            <div id="right_eye"> </div>
        </div>
                <div id="upper_body">
                    <div id="left_arm"> </div>
                    <div id="torso"> </div>
                    <div id="right_arm"> </div>
                </div>    
                <div id="lower_body">
                    <div id="left_leg"> </div>
                    <div id="right_leg"> </div>
                </div>    
        </div>

С div разобрались – пришло время стилизации при помощи CSS и различных CSS3 технологий.

Приведенный ниже код придаст всем частям тела Дрюши зеленый цвет:

 #left_antenna, #right_antenna, #head, #left_arm, #torso, #right_arm, #left_leg,
#right_leg {
        background-color: #a4c739;
    }

Голова, верхняя часть тела и нижние элементы будут стилизоваться первыми. Итак, когда вы будете делать предварительный просмотр изображения, вы можете “закомментировать” антенну и глаза в HTML коде. См. пример ниже:

<!--
    <div id="left_antenna"> </div>
    <div id="right_antenna"> </div>
    -->

Для стилизации головы, верхней части тела и нижних элементов, мы будем использовать border-radius,чтобы создать полукруг для головы. Так как это CSS3 свойство, то мы должны использовать префиксы, чтобы сделать его совместимым с другими браузерами. Мы, также, будем использовать margin свойство для отделения каждого элемента, чтобы был разрыв между руками, туловищем и головой.

Важно отметить, что любой из фигур может быть изменена. Однако, если вы измените любое из измерений, проведите несколько тестирований, чтобы убедиться, что все выглядит правильно.

#head {
        width: 400px;
        margin: 0 auto;
        height: 200px;
        border-radius: 200px 200px 0 0;
        -webkit-border-radius: 200px 200px 0 0;
        -moz-border-radius: 200px 200px 0 0;
        -ms-border-radius: 200px 200px 0 0;
        -o-border-radius: 200px 200px 0 0;
        margin-bottom: 10px;
        }

    #upper_body {
        width: 700px;
        height: 400px;
        margin: 0 auto;
        text-align: center;
        }

        #left_arm, #right_arm {
            width: 100px;
            height: 325px;
            float: left;
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -ms-border-radius: 100px;
            -o-border-radius: 100px;
        }

        #left_arm {
            margin-right: 10px;
            margin-left: -10px;
        }

        #torso {
            width: 400px;
            height: 400px;
            float: left;
            border-radius: 0 0 50px 50px;
            -webkit-border-radius: 0 0 50px 50px;
            -moz-border-radius: 0 0 50px 50px;
            -ms-border-radius: 0 0 50px 50px;
            -o-border-radius: 0 0 50px 50px;
            margin-right: 10px;
        }

        #lower_body {
            width: 400px;
            height: 200px;
            margin: 0 auto;
        }

        #left_leg, #right_leg {
            width: 100px;
            height: 200px;
            float: left;
            border-radius: 0 0 100px 100px;
            -webkit-border-radius: 0 0 100px 100px;
            -moz-border-radius: 0 0 100px 100px;
            -ms-border-radius: 0 0 100px 100px;
            -o-border-radius: 0 0 100px 100px;
        }

        #left_leg {
            margin-left: 75px;
        }

        #right_leg {
            margin-left: 50px;
        }

Теперь у нас есть основная структура Дроида Дрюши. На данном этапе он выглядит так:

Большой Андроид

В заключительной части этого урока, мы добавим антенну и глаза. Начнем с удаления комментариев вокруг div антенны и глаз. Глаза используют тоже свойство border-radius, которое мы использовали для создания тела Дроида. Мы, также, применим CSS свойство position,для их правильного позиционирования.

#left_eye, #right_eye {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        background-color: white;
        float: left;
    }

    #left_eye {
        position: relative;
        top: 100px;
        left: 90px;
    }

    #right_eye {
        position: relative;
        top: 100px;
        left: 250px;
    }

Для антенны, используйте transform свойство. У этого свойства есть огромные возможности. Если вы знакомы с бесплатным инструментом Adobe Photoshop’s Free Transform, вы можете его использовать для вращения, масштабирования, наклонов или добавления перспектив к изображению или графике. С CSS3 мы можем выполнить все это и даже более, с помощью свойства transform. Повторимся, мы используем position, чтобы убедиться, что обе антенны находятся в правильном положении на голове.

#antenna {
        width: 400px;
        height: 100px;
        margin: 0 auto;
    }

    #left_antenna, #right_antenna {
        width: 10px;
        height: 100px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        float: left;
    }

    #left_antenna {
        position: relative;
        top: 40px;
        left: 70px;
        transform:rotate(-33deg);
        -webkit-transform: rotate(-33deg);
        -moz-transform: rotate(-33deg);
        -ms-transform: rotate(-33deg);
        -o-transform: rotate(-33deg);
    }

    #right_antenna {
        position: relative;
        top: 40px;
        left: 310px;
        transform: rotate(33deg);
        -webkit-transform: rotate(33deg);
        -moz-transform: rotate(33deg);
        -ms-transform: rotate(33deg);
        -o-transform: rotate(33deg);
    }

Теперь, все наши элементы готовы и стилизованы. Давайте посмотрим на результат в браузере. При условии, что все работает правильно, вы должны увидеть Дроида Дрюшу во всей красе:

Большой полноценный Андроид