Лого www.SiteHere.ru

Пример на CSS — создание удивленной панды на чистом CSS

Я продолжаю создавать разнообразных персонажей на чистом CSS. В этом видео Вы увидите не просто лицо, а панду с ногами, руками и восклицательным знаком у правой руки. Кроме того панда будет еще и удивленной. Хотя некоторым она может показаться немного грустной, но это смотря в каком настроении на нее смотреть 🙂 . Изображений здесь Вы опять же не найдете, а лишь код CSS. Смотрите очередное видео и наслаждайтесь процессом создания панды на чистом CSS.

Кто не видел как я создал смурфа и Микки Мауса — обязательно посмотрите эти видео:

Не забудьте также посмотреть статью и примеры где я «оживил» Микки Мауса также только с помощью CSS:

Пример CSS — Удивленная Панда

Ниже на изображении Вы видите финальный результат панды:

Результат

2. Реализация панды на CSS

Тем же способом как и в случае со смурфиком и Микки Маусом мы будем создавать удивленную панду:

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

Не буду переписывать одно и тоже, потому что процесс создания панды практически не отличается от предыдущих двух примеров. Но, как Вы заметили, 4-м пунктом добавился "Прозрачные границы", который нужен для того, чтобы создать восклицательный знак.

Процесс создания удивленной панды в ускоренном режиме можно посмотреть ниже:

Исходники для скачивания

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

Смотреть ПандуСкачать

Вывод

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

Успехов!

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

Рейтинг статьи

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

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
6 комментариев к записи
  • Alexandr

    Сделай на чистом css ариэль.

     
  • Vlad

    Как всегда — круто! 😉

     
    • Юрий

      Спасибо, Влад 🙂 !)

       
  • Никита Волков

    Юр, привет! Потрясающая статья! Панда получилась очень прикольная!
    Хотел спросить. Сможешь мне помочь с оформлением сайдбара, т.е. рубрик и т.д. Ну и меню хочу выпадающее поставить. Ты уже как-то ставил мне меню, шапку и форму поиска)) Скоро вот зарплатку дадут, дак вот хотелось бы сделать))

    Кстати, а ты не занимаешься адаптацией сайта под мобильные устройства? А то меню на них плохо стало отображаться((

     
    • Юрий

      Привет, Никита. Хорошо, напиши мне об этом более подробно в skype 🙂 .

       
      • Никита Волков

        Классно! Ближе к вечеру напишу тогда! Спасибо тебе ещё раз!

         

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

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