Как создать смурфа на чистом CSS
Если Вы постоянно следите за обновлением новостей на сайте, то могли заметить, что в последнее время вышло много статей посвященных возможностям CSS. Там я привожу примеры того, какие вещи можно создавать только на CSS! И эти примеры (а если быть точным, то Гомер Симпсон 🙂 ) меня вдохновили на создание собственного персонажа на чистом CSS. Сегодня я покажу на видео как я создавал смурфика.
Четыре части статьи «Невероятный CSS» можно найти по ссылкам здесь:
Посмотрев все эти статьи Вы поймете почему я решил создать своего персонажа, пусть пока что неполностью.
Смурф — это мой первый персонаж на CSS. Рекомендую также посмотреть Микки Мауса в процессе создания и как я его оживил:
Почему я выбрал смурфика?
Потому что это персонаж из детства. Эти мультфильмы мне очень хорошо запомнились. А сейчас давайте по порядку: как я его создавал.
1. На бумаге
Да, я взял листочек бумаги и схематично нарисовал что хочу сделать с помощью CSS. То что я нарисовал — это конечно не есть хорошо, но мне этого хватило чтобы увидеть картинку целиком и начать создавать ее с помощью CSS. То, что я нарисовал (если это можно так назвать) — Вы видите ниже:
2. Воплощаем задумку в браузере с помощью CSS
Здесь начинается самое интересное, потому что одновременно с контурами мы закрашиваем части нашего смурфика. Раскрываю секреты на чем, собственно, держится всё это дело:
Представляете, это всё что нужно! Кажется так мало всего, но если это правильно скомбинировать, то можно создавать очень впечатляющие вещи.
Ниже есть видео, на котором можно посмотреть процесс создания смурфика:
Нужны исходники?
Этого смурфика я создал для того, чтобы показать что ничего сложного в этом нет и каждый может это сделать. Код, который Вы скачаете не является идеальным, так как я создавал это только для примера. Но Вы можете его немного доработать и он будет красиво отображаться на Вашем сайте.
Смотреть смурфаСкачать
Вывод
Вы увидели процесс создания смурфика на видео и я надеюсь что поняли — ничего сложного в этом нет. Конечно, для этого нужно время и капельку креатива, чтобы создать. Но я уверен что у каждого эта капелька присутствует.
