Лого www.SiteHere.ru

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

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

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

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

PDF отчет

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

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

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

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

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

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

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

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

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

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

Вывод

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

Успехов!

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

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Бесплатный PDF отчет
Комментарии (9) к записи
  • Инна

    😉 Cупер Черепашка!!!

     
    • Юрий

      Благодарю, Инна! :smile:

       
  • Никита Волков

    Вообще классная получилась))

     
  • Рита

    Молодец! 😉

     
  • Егор

    Скоро вместо фотошопа CSS будет

     
    • Юрий

      Егор, да и размер файла CSS значительно меньше изображения :smile: .

       

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

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