НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

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

0

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

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

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

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

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

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

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

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

Droidrobot

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

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

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

droid2

 

 

Перевод

Поделиться:

Об Авторе

Главный редактор портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта, занимаюсь продвижением журнала в социальных сетях и PR-каналах, а также несу ответственность за маркетинговые стратегии нашего проекта.