Лого www.SiteHere.ru

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

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

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

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

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

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

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

Конечный результат

1. На бумаге

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

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

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

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

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

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

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

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

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

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

Вывод

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

Успехов!

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

Как создать смурфа на чистом CSS 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

10 комментариев к записи
  • Vlad

    Привет!

    Круто получилось! 😉

    В принципе саму структуру понимаю, могу изменять, дописывать что-то, но вот чтобы с нуля что-то сотворить пока что знаний не хватает…

    Планирую в ближайшее время изучить какой-то курс… Что можете посоветовать?

     
    • Юрий

      Спасибо! Если Вы хотите изучать CSS и основы уже знаете (или не очень хорошо), тогда советую книги — здесь.

       
      • Vlad

        Спасибо! Почитаю!

        А курс Попова смотрели?

         
        • Юрий

          Конечно, но давно очень — это самые основы.

           
  • Валерий

    Спасибо за статью!
    Правда забавно было наблюдать, как эти смурфы отображаются в разных браузерах.
    Opera | Maxthon | Firefox | Chrome.

     
    • Юрий

      Валерий, спасибо за скриншоты! Но в статье писал…
      Текст из статьи

       
  • Максим

    Юра, отличный пример возможностей CSS. Трудоёмкий, но очень увлекательный процесс. И результат того стоит. Спасибо за урок.

     
  • Галина Нагорная

    Просмотрела видео о создании Смурфика — прямо фантастика! Благодарю! 
    Вы так легко справились с этим процессом….

     
    • Юрий

      Спасибо, Галина!

      В таком же стиле на сайте есть видео создания Микки Мауса, удивленной панды и черепашки на чистом CSS. Надеюсь они Вам также понравятся 🙂 .

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *