10 diseños de personajes creados íntegramente con HTML y CSS

Estoy constantemente sorprendido de todo lo que puedes hacer con CSS. Los desarrolladores web saben que CSS les permite crear diseños de página increíbles y efectos de animación personalizados.

Pero también puedes usarlo para muchos proyectos divertidos. Como, por ejemplo, crear diseños de personajes solo con CSS. ¿Suena raro verdad?

Bueno, definitivamente lo es. Y he recopilado algunos de los diseños de personajes más raros (pero geniales), todos hechos con código HTML y CSS 100 % puro.

1. Pájaros enojados

¿Quién no ama Angry Birds? Comenzaron como un juego y de alguna manera obtuvieron su propia película después de pinchar la cultura pop.

Y este bolígrafo de Rachel Bull demuestra que los Angry Birds incluso pueden llegar a CSS.

Irónicamente, hay una imagen en esta página y se usa para incrustar el tipo personalizado en la parte superior. Todos los demás elementos, desde las curvas de esos pájaros hasta los degradados personalizados, se ejecutan en CSS puro.

Tal vez no sea el fragmento de código más práctico, pero ciertamente una inspiración.

2. frankenstein

Frankenstein de Mary Shelley es ampliamente conocido como la criatura de piel verde revivida. Aunque técnicamente es el monstruo de Frankeinstein, eso no sale tan bien de la lengua.

Y aunque esta criatura de Frankenstein puede estar un poco mal titulada, sigue siendo uno de los mejores diseños de personajes que he visto.

Funciona en solo 40 líneas de HTML y la desarrolladora Victoria Ninni Bergquist incluso agregó algo de CSS para ayudar al monstruo a parpadear. ¡Con buena pinta!

3. Alienígena de Toy Story

Toy Story de Pixar tiene tantos personajes memorables y estos alienígenas chiflados son sin duda parte de ese elenco.

Sunyoung Park creó este bolígrafo como una demostración de CSS y para probar los límites de la codificación de frontend. Debería mostrarse correctamente en todos los principales navegadores e incluso en algunos navegadores más antiguos. Aunque se basa bastante en la propiedad de rotación ().

Afortunadamente, esto viene como parte de la función de transformación de CSS que admite navegadores que se remontan a IE9+. Así que este pequeño extraterrestre verde puede hacer las delicias de la mayor parte del mundo conectado a Internet.

4. Aku Aku

Si tenías una PlayStation, probablemente conozcas Crash Bandicoot. Bueno, este tipo loco llamado Aku Aku es una réplica perfecta de la máscara... criatura... cosa.

Cada elemento tiene su propio div con una clase relevante que define esa característica (es decir, ojo, labio nasal).

Diría que la parte más difícil de todo este diseño es la corona de plumas en su cabeza. Además de las geniales animaciones que pueden animar a los jugadores a retomar sus viejos juegos de Crash.

5. Ardilla bebé

Aquí hay otro gran ejemplo de animación combinada con diseño de personajes CSS.

Josh Bader codificó este personaje de Squirtle usando CSS puro y solo 15 líneas de HTML. ¡Impresionante!

Para obtener el efecto de caminar, Josh agregó la pseudoclase :after a cada elemento con una animación repetitiva. Una hazaña sorprendentemente simple una vez que miras debajo del capó y es aún más sorprendente cómo se requiere un código tan pequeño para construir personajes como estos.

6. Rick sin Morty

En este bolígrafo, encontrarás el alocado trabajo del desarrollador James Gilmore, quien creó un Rick chibi en puro CSS.

El diseño en realidad usa algunas sombras paralelas agradables de CSS para crear profundidad y darle algo de vida a este personaje. Sin mencionar la animación repetitiva que también combina muy bien con el diseño.

Tenga en cuenta que esto también se ejecuta en Sass y si quiere jugar con él, hay variables personalizadas en el código. Está muy bien formateado, por lo que este sería un fragmento increíble para estudiar para aprender Sass.

7. Brian Griffin

Aquí hay otro diseño de personajes de Rachel Bull, este con Brian Griffin de Family Guy.

Es sorprendente la cantidad de detalles que se pueden obtener con solo CSS puro. Todo el estilo de Brian coincide estrechamente con el estilo artístico de la serie y utiliza sombras paralelas que se sienten increíblemente realistas.

Aunque este es bastante técnico con más de 150 líneas de CSS y está usando la biblioteca Compass para arrancar.

8. Emmet

De The Lego Movie es Emmet en todo su esplendor. Rachel una vez más creó este fragmento desde cero utilizando CSS y Haml, la forma simplificada de escribir HTML moderno.

Algunos de estos elementos realmente se destacan como bastante impresionantes para ejecutarse solo en CSS. En particular, los remolinos de cabello realmente parecen piezas de Lego de plástico. ¡Qué locura que esto sea posible!

Hay una gran cantidad de lógica Sass en el CSS, y si eres un nerd de desarrollo, disfrutarás hurgando en este bolígrafo. Tanto el código como el resultado son gloriosos.

9. CSS Eevee

Construido alrededor del fenómeno Pokémon Go, se encuentra este CSS Eevee puro creado por David Khourshid.

Utiliza un fondo y un estilo de página similares a los de la aplicación mientras recrea todo el Pokémon en CSS puro. ¡Con un poco de textura y algunas capas inteligentes, David hizo que este Eevee realmente pareciera 3D!

Las animaciones también son un buen toque y hacen que todo parezca más realista. Tanto si eres fanático de Pokémon como si nunca has tocado el juego, debes admitir que este es un buen trabajo.

10. Ratón Mickey

Si bien esta cabeza de Mickey Mouse es un poco más simple, también es toda una hazaña. Puede pensar que sería más fácil de administrar porque es estático, sin embargo, la pluma empuja más de 450 líneas de Sass.

La parte más técnica es ordenar todas las formas y reorganizar los elementos para que se alineen correctamente unos encima de otros.

Sin embargo, el resultado es fantástico, y puedes ver el parecido con los primeros dibujos animados de Mickey.

11. Princesa Zelda

He guardado lo mejor para el final con este diseño de personaje de Zelda. Es un poco corta de piernas, pero en general el estilo es preciso.

El desarrollador Charlie Marcotte usa Sass y transformaciones CSS personalizadas para organizar todos los elementos. Además, el HTML sin procesar se simplifica bastante gracias al preprocesador Pug.

Si está tratando de superar los límites de su conocimiento de CSS, ¿por qué no emprender un proyecto similar? Es una excelente manera de probar sus habilidades y siempre puede compartir lo que construya en los comentarios a continuación.