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