10 Character Designs Created Entirely With HTML & CSS

I’m constantly surprised at just how much you can do with CSS. Web developers know that CSS lets you build some incredible page layouts and custom animation effects.

But you can use it for lots of fun projects too. Like, for example, building character designs with just CSS. Sounds weird right?

Well it definitely is. And I’ve collected some of the weirdest (yet coolest) character designs, all made from 100% pure HTML & CSS code.

1. Angry Birds

Who doesn’t love Angry Birds? They started as a game and somehow got their own movie after puncturing pop culture.

And this pen by Rachel Bull proves that the Angry Birds can even find their way into CSS.

Ironically there is one image on this page, and it’s used to embed the custom type at the very top. Every other element from the curves of those birds to the custom gradients all run on pure CSS.

Maybe not the most practical code snippet but certainly an inspiration.

2. Frankenstein

Mary Shelley’s Frankenstein is widely known as the revived green-skinned creature. Although it’s technically Frankeinstein’s monster, that doesn’t roll off the tongue so well.

And while this Frankenstein creature may be somewhat mistitled it’s still one of the best character designs I’ve seen.

It works on just 40 lines of HTML and developer Victoria Ninni Bergquist even added some CSS to help the monster blink. Pretty neat!

3. Toy Story Alien

Pixar’s Toy Story has so many memorable characters and these wacky alien guys are certainly part of that cast.

Sunyoung Park built this pen as a demo for CSS and to test the boundaries of frontend coding. It should render properly in all major browsers and even some older browsers. Although it does rely on the rotate() property quite a bit.

Luckily this comes as part of the CSS transforms feature which supports browsers dating back to IE9+. So this little green alien can delight most of the Internet-connected world.

4. Aku Aku

If you had a PlayStation then you probably know about Crash Bandicoot. Well this crazy guy named Aku Aku is a perfect replica of the mask… creature… thing.

Each element has its own div with a relevant class defining that feature(ie. eye, nose lip).

I’d say the toughest part of this whole design is the feather crown on his head. Plus the cool animations that might encourage gamers to pick up their old Crash games.

5. Baby Squirtle

Here’s another great example of animation mixed with CSS character design.

Josh Bader coded this Squirtle character using pure CSS and only 15 lines of HTML. Impressive!

To get the walking effect Josh appended the :after pseudo-class onto each element with a repeating animation. A surprisingly simple feat once you look under the hood and it’s even more surprising how such little code is required to build characters like these.

6. Rick Without A Morty

In this pen you’ll find the wacky work of developer James Gilmore who crafted a chibi-fied Rick in pure CSS.

The design actually uses some nice CSS drop shadows to create depth and give this character some life. Not to mention the repeating animation that also blends nicely with the design.

Note this also runs on Sass and if you wanna tinker with it there are custom variables in the code. It’s very well formatted, so this would be an awesome snippet to study for learning Sass.

7. Brian Griffin

Here’s another character design by Rachel Bull, this one featuring Family Guy’s Brian Griffin.

It’s surprising how much detail you can get with just pure CSS. The entire style of Brian matches closely to the show’s art style, and it uses drop shadows that feel incredibly realistic.

Although this one is pretty technical with well over 150+ lines of CSS and it’s using the Compass library to boot.

8. Emmet

From The Lego Movie it’s Emmet in all his glory. Rachel once again built this snippet from scratch using CSS and Haml, the simplified way to write modern HTML.

A few of these elements really stand out as quite impressive for running just on CSS. Notably, the hair swirls really look like plastic Lego pieces. Crazy that this is even possible!

There’s a lot of great Sass logic in the CSS, and if you’re a dev nerd, you’ll enjoy poking around this pen. Both the code and the result are glorious.

9. CSS Eevee

Built around the Pokemon Go phenomenon is this pure CSS Eevee made by David Khourshid.

It uses a similar background and page style as the application while re-creating the entire Pokemon in pure CSS. With a bit of texturing and some intelligent layering, David made this Eevee actually look 3D!

The animations are also a nice touch, and they make the whole thing feel more realistic. Whether you’re a fan of Pokemon or have never touched the game, you’ve got to admit this is good work.

10. Mickey Mouse

While this Mickey Mouse head is a little simpler it’s also quite a feat. You might think it’d be easier to manage because it’s static, however the pen pushes over 450+ lines of Sass.

The most technical part is getting all the shapes in order and rearranging the elements to align properly on top of each other.

Yet the result is fantastic, and you can see the resemblance to early Mickey cartoons.

11. Princess Zelda

I’ve saved the best for last with this Zelda character design. She’s a bit short in the legs but overall the style is accurate.

Developer Charlie Marcotte uses Sass and custom CSS transforms to arrange all the elements. Plus the raw HTML is simplified quite a bit thanks to the Pug preprocessor.

If you’re trying to push the limits of your CSS knowledge why not take up a similar project? It’s a great way to test your skills, and you can always share whatever you build in the comments below.

The post 10 Character Designs Created Entirely With HTML & CSS appeared first on Speckyboy Web Design Magazine.