Приклад на css - створення здивованої панди на чистому css

Я продовжую створювати різноманітних персонажів на чистому CSS. У цьому відео Ви побачите не просто особа, а панду з ногами, руками і знаком оклику у правої руки. Крім того панда буде ще і здивованої. Хоча деяким вона може здатися дещо сумною, але це дивлячись в якому настрої на неї дивитися # 128578; . Зображень тут Ви знову ж таки не знайдете, а лише код CSS. Дивіться чергове відео і насолоджуйтеся процесом створення панди на чистому CSS.

Хто не бачив як я створив Смурфа і Міккі Мауса - обов`язково подивіться ці відео:

• Як створити Смурфа на чистому CSS
• Приклад CSS створення Міккі Мауса - приклад створення Міккі Мауса на CSS

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

• Приклад CSS анімації - пожвавлюємо Міккі Мауса

Приклад CSS - Здивована Панда

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

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

Тим же способом як і у випадку зі Смурфіки і Міккі Маусом ми будемо створювати здивовану панду:

• абсолютне позиціонування
• радіус кордону
• поворот
• прозорі кордони

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

Процес створення здивованої панди в прискореному режимі можна подивитися нижче:

Вихідні тексти для скачування

Нижче Ви можете подивитися цю панду в своєму браузері, а також завантажити, щоб більш детально вивчити процес створення.

дивитися ПандуСкачать

висновок

Черговий персонаж на чистому CSS готовий! Якщо у Вас з`явилися ідеї з приводу того, що (чи кого) ще можна створити на CSS - пишіть про це в коментарях. І, можливо, в наступному відео саме це я і реалізую!

Успіхів!

З повагою, Юрій Німець