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

Чергове відео, на якому я зробив черепашку на чистому CSS. Багато просили зробити Гомера, але Гомер вже реалізований на CSS (не я # 128578; ). Як завжди, ніяких зображень, а лише чистий CSS. Дивіться відео і, я сподіваюся, воно надихне Вас на створення чогось свого.

Смурф, Міккі Маус і панда також вже створені подібним чином, дивіться їх за наступними посиланнями:

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

Також є вже «живий» Міккі Маус, де все чистою CSS:

• Пожвавлюємо Міккі Мауса

Приклад CSS - Черепашка

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

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

Подібним чином як я створював минулих персонажів, також створювався цей, за одним невеликим винятком:

• абсолютне позиціонування
• радіус кордону
• поворот
• прозорі кордони
• Псевдоелементи ": before" і ": after"

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

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

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

дивитися черепашкуСкачать

висновок

Якщо є ще пропозиції щодо створення цікавих персонажів - пишіть в коментарях!

Успіхів!

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