Лого SiteHere.ru

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

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

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

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

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

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

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

Финальный результат на CSS

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

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

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

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

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

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

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

Вывод

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

Успехов!

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

Новые кейсы и статьи по digital маркетингу
9 комментариев к записи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *