Як створити смурфа на чистому css

Якщо Ви постійно стежите за оновленням новин на сайті, то могли помітити, що останнім часом вийшло багато статей присвячених можливостям CSS. Там я привожу приклади того, які речі можна створювати тільки на CSS! І ці приклади (а якщо бути точним, то Гомер Сімпсон # 128578; ) Мене надихнули на створення власного персонажа на чистому CSS. Сьогодні я покажу на відео як я створював Смурфіки.

Чотири частини статті «Неймовірний CSS» можна знайти за посиланням тут:

• Неймовірна CSS технологія - Частина 1
• Неймовірна CSS технологія - Частина 2
• Неймовірна CSS технологія - Частина 3
• Неймовірна CSS технологія - Частина 4

Подивившись всі ці статті Ви зрозумієте чому я вирішив створити свого персонажа, нехай поки що не повністю.

Смурф - це мій перший персонаж на CSS. Рекомендую також подивитися Міккі Мауса в процесі створення і як я його оживив:

• Приклад CSS створення Міккі Мауса - приклад створення Міккі Мауса на CSS
• Приклад CSS анімації - пожвавлюємо Міккі Мауса

Чому я вибрав Смурфіки?

Тому що це персонаж з дитинства. Ці мультфільми мені дуже добре запам`яталися. А зараз давайте по порядку: як я його створював.

1. На папері

Так, я взяв аркуш паперу і схематично намалював що хочу зробити за допомогою CSS. Те що я намалював - це звичайно не є добре, але мені цього вистачило щоб побачити картинку цілком і почати створювати її з допомогою CSS. Те, що я намалював (якщо це можна так назвати) - Ви бачите нижче:

2. Втілюємо задумку в браузері за допомогою CSS

Тут починається найцікавіше, бо одночасно з контурами ми зафарбовуємо частини нашого Смурфіки. Розкриваю секрети на чому, власне, тримається все це справа:

• абсолютне позиціонування
• радіус кордону
• поворот
• тінь блоку

Уявляєте, це все що потрібно! Здається так мало всього, але якщо це правильно скомбінувати, то можна створювати дуже вражаючі речі.

Нижче є відео, на якому можна подивитися процес створення Смурфіки:

Потрібні вихідні?

Цього Смурфіки я створив для того, щоб показати що нічого складного в цьому немає і кожен може це зробити. Код, який Ви скачаєте не є ідеальним, так як я створював це тільки для прикладу. Але Ви можете його трохи доопрацювати і він буде красиво відображатися на Вашому сайті.

дивитися смурфаСкачать

Якщо Вам сподобався смурф і його реалізація - клікніть по одній з кнопок соціальних мереж нижче. Нехай про нього дізнаються Ваші друзі # 128578; !

висновок

Ви побачили процес створення Смурфіки на відео і я сподіваюся що зрозуміли - нічого складного в цьому немає. Звичайно, для цього потрібен час і крапельку креативу, щоб створити. Але я впевнений що у кожного ця крапелька присутній.

Успіхів!

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