10 дизайнов персонажей, полностью созданных с помощью HTML и CSS

Я постоянно удивляюсь тому, как много можно сделать с помощью CSS. Веб-разработчики знают, что CSS позволяет создавать невероятные макеты страниц и специальные анимационные эффекты.

Но вы можете использовать его и для множества забавных проектов. Как, например, создание дизайна персонажей только с помощью CSS. Звучит странно, верно?

Ну, это определенно так. И я собрал некоторые из самых странных (но самых крутых) дизайнов персонажей, все они сделаны из 100% чистого кода HTML и CSS.

1. Злые птицы

Кто не любит Angry Birds? Они начинались как игра и каким-то образом получили свой собственный фильм после прокола поп-культуры.

И эта ручка Рэйчел Булл доказывает, что Angry Birds могут найти свой путь даже в CSS.

По иронии судьбы на этой странице есть одно изображение, и оно используется для встраивания пользовательского типа в самый верх. Все остальные элементы, от кривых этих птиц до пользовательских градиентов, выполняются на чистом CSS.

Возможно, не самый практичный фрагмент кода, но, безусловно, вдохновляющий.

2. Франкенштейн

Франкенштейн Мэри Шелли широко известен как ожившее зеленокожее существо. Хотя технически это монстр Франкенштейна, это не так хорошо слетает с языка.

И хотя это существо Франкенштейна может быть несколько неправильно названо, это все же один из лучших дизайнов персонажей, которые я когда-либо видел.

Он работает всего с 40 строками HTML, а разработчик Виктория Нинни Бергквист даже добавила немного CSS, чтобы заставить монстра моргать. Довольно аккуратно!

3. Чужой из «Истории игрушек»

В «Истории игрушек» Pixar так много запоминающихся персонажей, и эти дурацкие инопланетяне, безусловно, являются частью этого состава.

Sunyoung Park создал эту ручку в качестве демонстрации CSS и для проверки границ внешнего кодирования. Он должен правильно отображаться во всех основных браузерах и даже в некоторых старых браузерах. Хотя он немного зависит от свойства rotate().

К счастью, это является частью функции преобразований CSS, которая поддерживает браузеры, начиная с IE9+. Так что этот маленький зеленый инопланетянин может порадовать большую часть мира, подключенного к Интернету.

4. Аку Аку

Если у вас была PlayStation, то вы наверняка знаете о Crash Bandicoot. Что ж, этот сумасшедший по имени Аку Аку — идеальная копия маски… существа… вещи.

Каждый элемент имеет свой собственный div с соответствующим классом, определяющим эту функцию (например, глаз, губу носа).

Я бы сказал, что самая сложная часть всего этого дизайна — это корона из перьев на его голове. Плюс крутые анимации, которые могут побудить геймеров вернуться к своим старым играм Crash.

5. Малышка Сквирт

Вот еще один отличный пример анимации, смешанной с дизайном персонажей CSS.

Джош Бейдер закодировал этого персонажа Сквиртла, используя чистый CSS и всего 15 строк HTML. Впечатляющий!

Чтобы получить эффект ходьбы, Джош добавил к каждому элементу псевдокласс :after с повторяющейся анимацией. Удивительно простой подвиг, если заглянуть под капот, и еще более удивительно, как такой небольшой код требуется для создания таких персонажей.

6. Рик без Морти

В этой ручке вы найдете дурацкую работу разработчика Джеймса Гилмора, который создал чиби-рика на чистом CSS.

Дизайн на самом деле использует некоторые хорошие тени CSS, чтобы создать глубину и дать этому персонажу немного жизни. Не говоря уже о повторяющейся анимации, которая также хорошо сочетается с дизайном.

Обратите внимание, что это также работает на Sass, и если вы хотите повозиться с этим, в коде есть пользовательские переменные. Он очень хорошо отформатирован, так что это отличный фрагмент для изучения Sass.

7. Брайан Гриффин

Вот еще один дизайн персонажа от Рэйчел Булл, на этот раз с Брайаном Гриффином из «Гриффинов».

Удивительно, как много деталей можно получить, используя только чистый CSS. Весь стиль Брайана близко соответствует художественному стилю шоу, и он использует тени, которые кажутся невероятно реалистичными.

Хотя этот довольно технический с более чем 150+ строками CSS и использует для загрузки библиотеку Compass.

8. Эммет

Из Лего Фильма это Эммет во всей красе. Рэйчел снова создала этот фрагмент с нуля, используя CSS и Haml, упрощенный способ написания современного HTML.

Некоторые из этих элементов действительно впечатляют тем, что работают только на CSS. Примечательно, что завитки волос действительно выглядят как пластиковые детали Lego. Без ума, что это вообще возможно!

В CSS много отличной логики Sass, и если вы разработчик, вам понравится ковыряться в этой ручке. И код, и результат великолепны.

9. CSS Иви

Этот чистый CSS Eevee, созданный Дэвидом Хуршидом, построен вокруг феномена Pokemon Go.

Он использует тот же фон и стиль страницы, что и приложение, воссоздавая всего покемона в чистом CSS. С небольшим текстурированием и интеллектуальным наслоением Дэвид сделал этот Eevee действительно трехмерным!

Анимации также приятны, и они делают все более реалистичным. Являетесь ли вы поклонником покемонов или никогда не касались игры, вы должны признать, что это хорошая работа.

10. Микки Маус

Хотя эта голова Микки Мауса немного проще, это также настоящий подвиг. Вы можете подумать, что им будет легче управлять, потому что он статичен, однако ручка выводит более 450 строк Sass.

Самая техническая часть — это упорядочить все фигуры и переставить элементы так, чтобы они правильно выровнялись друг над другом.

Тем не менее, результат фантастический, и вы можете увидеть сходство с ранними мультфильмами о Микки.

11. Принцесса Зельда

Я оставил лучшее напоследок с этим дизайном персонажа Zelda. Она немного коротковата в ногах, но в целом стиль точен.

Разработчик Чарли Маркотт использует Sass и пользовательские преобразования CSS для организации всех элементов. Кроме того, необработанный HTML-код значительно упрощается благодаря препроцессору Pug.

Если вы пытаетесь раздвинуть границы своих знаний CSS, почему бы не взяться за аналогичный проект? Это отличный способ проверить свои навыки, и вы всегда можете поделиться тем, что вы построили, в комментариях ниже.