Пример на CSS — создание черепашки на чистом CSS

Очередное видео, на котором я сделал черепашку на чистом CSS. Многие просили сделать Гомера, но Гомер уже реализован на CSS (не мною 🙂 ). Как обычно, никаких изображений, а лишь чистый CSS. Смотрите видео и, я надеюсь, оно вдохновит Вас на создание чего-нибудь своего.

Смурф, Микки Маус и панда также уже созданы подобным образом, смотрите их по следующим ссылкам:

• Как создать смурфа на чистом CSS
• Создание Микки Мауса
• Создание удивленной панды на чистом CSS

Также есть уже «живой» Микки Маус, где всё на чистом CSS:

• Оживляем Микки Мауса

Пример CSS — Черепашка

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

2. Реализация черепашки на CSS

Подобным образом как я создавал прошлых персонажей, также создавался этот, за одним небольшим исключением:

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

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

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

Ниже Вы можете посмотреть черепашку в браузере, а также скачать исходники.

Смотреть черепашкуСкачать

Вывод

Если есть еще предложения по созданию интересных персонажей — пишите в комментариях!

Успехов!

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