7 Awesome CSS Cards: 🎰 Cuphead Style ☕️ + (animation, pure CSS, tutorual)
Tags: webdev, tutorial, css, codepen
Published: 2021-07-16 18:11:04

<h1>Introduction</h1>
A couple of years ago, I happened to play a game called <strong>Cuphead</strong>. When I finished it, I thought that I would soon forget about it and switch to something else. But everything turned out to be wrong. I liked the style of this game so much that I didn't want to just forget about it. And so I decided to find a couple of `GIF` images on the internet and create different kinds of `CSS Cards` for them.

<strong>Well, let's get down to the show.</strong>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vg2mfhn9jn0e4tn5j5q.gif)

<h1>DEMO</h1>
For those who do not want to read the entire post, I can suggest taking a look at the finished project right away.

{% codepen https://codepen.io/Astap/pen/OJmpxGp %}

> <strong>You can also download the project from my `GitHub repository`. (There is also a demo on `GitHub Pages`).</strong>
{% github Kerthin/cuphead-templateSait %}
<a href="https://kerthin.github.io/cuphead-templateSait/"><h1>Full Page Demo (GitHub Pages)</h1></a>

<h1>01. Ribby 🥊</h1>
![Alt Text](https://media.giphy.com/media/Jn8pTpBM5Iz2M9Mond/giphy.gif)
The first card is dedicated to one of the first bosses in the game, a combat toad named <strong>Ribby</strong>. This card is made in the video of a boxing ring (you can see the tight ropes in the background).

When creating this card, simple geometric shapes such as triangles and cubes were used. You can edit each element on the card as you like (`color`, `size`, `font`, `etc.`).

> <strong>This also applies to other cards.</strong>

![Alt Text](https://media.giphy.com/media/cwhflD8kopt80HH9td/giphy.gif)

<h1>02. Croaks 🥊</h1>
![Alt Text](https://media.giphy.com/media/NAFFX3Pbfprnlz0xKI/giphy.gif)

`Croaks` is another of the bosses in the game, who is the brother of Ribby. During the battle, they are together and you need to resist their joint blows.

The card consists of simple elements. There is also a gradient in the background, which forms a `brick wall`.

![Alt Text](https://media.giphy.com/media/B3ur4Kf89L2a2YHWEE/giphy.gif)

<h1>03. Chauncey Chantenay 🥕</h1>
![Alt Text](https://media.giphy.com/media/luPz5LZM5cgKpbQS7q/giphy.gif)

`Chauncey Chantenay` is a large, anthropomorphic orange carrot with lanky arms and yellow and white eyes.

The design of this card is completely formed by fonts.

There are also cubes that you could see in the `first card`.

![Alt Text](https://media.giphy.com/media/Fh8es18SqnyUMV0kK7/giphy.gif)

<h1>04. Cuphead ☕️</h1>
![Alt Text](https://media.giphy.com/media/ghn1lsad75dPWb9tA0/giphy.gif)

A simple, but at the same time very good card, which depicts the main character of the game Cuphead.

<h1>05. Cagney Carnation 🌸</h1>
![Alt Text](https://media.giphy.com/media/62sCc3Yy10j2mFc6D1/giphy.gif)

`Cagney` is sneaky. He seems to delight in catching his enemies off guard with his appearance, posing as a harmless and adorable flower before roaring loudly and showing his true colors.

This card uses several triangles, inside of which animated linear gradients are placed.

![Alt Text](https://media.giphy.com/media/f4d9WaUnsk3U3fysxd/giphy.gif)

<h1>06. King Dice 🎰</h1>
![Alt Text](https://media.giphy.com/media/GLu13AMcNLQ7reC31k/giphy.gif)

`King Dice` is the right-hand man of the `Devil` and the secondary antagonist of Cuphead.

The card consists of the simplest elements with images of the character.

![Alt Text](https://media.giphy.com/media/2kLFo7APHKBU7W4ZVy/giphy.gif)

<h1>07. King Dice: Casino 🎰</h1>
![Alt Text](https://media.giphy.com/media/gHCoFYjLazcl7vB3NA/giphy.gif)

The most difficult card in its implementation. The card is an implementation of one of the `last levels` of the game, which is made in the form of a `roulette table` on which you can place your bets.

The most difficult thing in this card was to `create a table` on which the `King Dice` character relies.

> To create it, I used a `gradient` that forms the illusion of soft upholstery for the table surface. There is also a chain of `lots`, each of which you can edit separately as you like.

![Alt Text](https://media.giphy.com/media/hsAUE7XOIjUFz3MgvR/giphy.gif)

It was also necessary to make a playing table surface on which the main character would run. After creating it, it was necessary to create a perspective for the surface, which affected the depth of the image.

![Alt Text](https://media.giphy.com/media/itnoKSUBQ31B9PerIV/giphy.gif)

<h1>Conclusion</h1>
For me, this was a purely creative project, I did not try to create something insanely complex in order to impress someone. Just being impressed by the style of the `Cuphead` game, I decided to create these cards.

<h1>The End</h1>
Thank you for paying attention to my post. You can also follow me on <a href="https://twitter.com/BelichenkoRoden"><strong>Twitter</strong></a>, where I also publish many of my works.

<strong>Goodbye</strong>
![Alt Text](https://media.giphy.com/media/QC1pIBes52h663IwTN/giphy.gif)