Как создать смурфа на чистом CSS

Если Вы постоянно следите за обновлением новостей на сайте, то могли заметить, что в последнее время вышло много статей посвященных возможностям CSS. Там я привожу примеры того, какие вещи можно создавать только на CSS! И эти примеры (а если быть точным, то Гомер Симпсон 🙂 ) меня вдохновили на создание собственного персонажа на чистом CSS. Сегодня я покажу на видео как я создавал смурфика.

Четыре части статьи «Невероятный CSS» можно найти по ссылкам здесь:

• Невероятная CSS технология — Часть 1
• Невероятная CSS технология — Часть 2
• Невероятная CSS технология — Часть 3
• Невероятная CSS технология — Часть 4

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

Смурф — это мой первый персонаж на CSS. Рекомендую также посмотреть Микки Мауса в процессе создания и как я его оживил:

• Пример CSS создание Микки Мауса — пример создания Микки Мауса на CSS
• Пример CSS анимации — оживляем Микки Мауса

Почему я выбрал смурфика?

Потому что это персонаж из детства. Эти мультфильмы мне очень хорошо запомнились. А сейчас давайте по порядку: как я его создавал.

1. На бумаге

Да, я взял листочек бумаги и схематично нарисовал что хочу сделать с помощью CSS. То что я нарисовал — это конечно не есть хорошо, но мне этого хватило чтобы увидеть картинку целиком и начать создавать ее с помощью CSS. То, что я нарисовал (если это можно так назвать) — Вы видите ниже:

2. Воплощаем задумку в браузере с помощью CSS

Здесь начинается самое интересное, потому что одновременно с контурами мы закрашиваем части нашего смурфика. Раскрываю секреты на чем, собственно, держится всё это дело:

• Абсолютное позиционирование
• Радиус границы
• Поворот
• Тень блока

Представляете, это всё что нужно! Кажется так мало всего, но если это правильно скомбинировать, то можно создавать очень впечатляющие вещи.

Ниже есть видео, на котором можно посмотреть процесс создания смурфика:

Нужны исходники?

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

Смотреть смурфаСкачать

Если Вам понравился смурф и его реализация — кликните по одной из кнопок социальных сетей ниже. Пусть о нём узнают Ваши друзья 🙂 !

Вывод

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

Успехов!

С Уважением, Юрий Немец