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

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

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

• Как создать смурфа на чистом CSS
• Пример CSS создание Микки Мауса — пример создания Микки Мауса на CSS

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

Успехов!

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