Я продолжаю создавать разнообразных персонажей на чистом CSS. В этом видео Вы увидите не просто лицо, а панду с ногами, руками и восклицательным знаком у правой руки. Кроме того панда будет еще и удивленной. Хотя некоторым она может показаться немного грустной, но это смотря в каком настроении на нее смотреть 🙂 . Изображений здесь Вы опять же не найдете, а лишь код CSS. Смотрите очередное видео и наслаждайтесь процессом создания панды на чистом CSS.
Кто не видел как я создал смурфа и Микки Мауса — обязательно посмотрите эти видео:
- Как создать смурфа на чистом CSS
- Пример CSS создание Микки Мауса — пример создания Микки Мауса на CSS
Не забудьте также посмотреть статью и примеры где я «оживил» Микки Мауса также только с помощью CSS:
Пример CSS — Удивленная Панда
Ниже на изображении Вы видите финальный результат панды:
2. Реализация панды на CSS
Тем же способом как и в случае со смурфиком и Микки Маусом мы будем создавать удивленную панду:
- Абсолютное позиционирование
- Радиус границы
- Поворот
- Прозрачные границы
Не буду переписывать одно и тоже, потому что процесс создания панды практически не отличается от предыдущих двух примеров. Но, как Вы заметили, 4-м пунктом добавился "Прозрачные границы", который нужен для того, чтобы создать восклицательный знак.
Процесс создания удивленной панды в ускоренном режиме можно посмотреть ниже:
Исходники для скачивания
Ниже Вы можете посмотреть эту панду в своём браузере, а также скачать, чтобы более детально изучить процесс создания.
Смотреть ПандуСкачать
Вывод
Очередной персонаж на чистом CSS готов! Если у Вас появились идеи по поводу того, что (или кого) еще можно создать на CSS — пишите об этом в комментариях. И, возможно, в следующем видео именно это я и реализую!
Успехов!
С Уважением, Юрий Немец