DEV Community

Cover image for 7 Awesome CSS Cards: 🎰 Cuphead Style ☕️ + (animation, pure CSS, tutorual)
Roden
Roden

Posted on • Edited on

7 Awesome CSS Cards: 🎰 Cuphead Style ☕️ + (animation, pure CSS, tutorual)

Introduction

A couple of years ago, I happened to play a game called Cuphead. 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.

Well, let's get down to the show.
Alt Text

DEMO

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

You can also download the project from my GitHub repository. (There is also a demo on GitHub Pages).

GitHub logo Kerthin / cuphead-templateSait

Graphic cards in the style of the Cuphead video game.

Kerthin logo

Build Status completion Status Version Version Version
Size Size Version

Description

This site is an example of work created specifically for the portfolio. If you want to take a look at it, then you can follow the link given below.

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Libraries

Package manager


Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin Status Description
gulp-sourcemaps gulp-sourcemaps-status Intended for generation of css source maps which will be necessary at debugging of a code.
gulp-imagemin gulp-imagemin-status Minify PNG, JPEG, GIF and SVG images with imagemin
gulp-autoprefixer gulp-autoprefixer-status Prefix CSS with Autoprefixer
imagemin-pngquant imagemin-pngquant-status Pngquant imagemin plugin
gulp-uglify gulp-uglify-status Minify JavaScript with UglifyJS3.
gulp-rigger gulp-rigger-status Rigger is a build time include engine for Javascript, CSS, CoffeeScript.
gulp-minify-css gulp-minify-css-status Gulp plugin to minify CSS
rimraf rimraf-status The UNIX command rm -rf for node.
gulp-watch gulp-watch-status File watcher that uses super-fast chokidar and emits vinyl

Full Page Demo (GitHub Pages)

01. Ribby 🥊

Alt Text
The first card is dedicated to one of the first bosses in the game, a combat toad named Ribby. 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.).

This also applies to other cards.

Alt Text

02. Croaks 🥊

Alt Text

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

03. Chauncey Chantenay 🥕

Alt Text

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

04. Cuphead ☕️

Alt Text

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

05. Cagney Carnation 🌸

Alt Text

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

06. King Dice 🎰

Alt Text

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

07. King Dice: Casino 🎰

Alt Text

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

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

Conclusion

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.

The End

Thank you for paying attention to my post. You can also follow me on Twitter, where I also publish many of my works.

Goodbye
Alt Text

Top comments (10)

Collapse
 
salarc123 profile image
SalarC123

How much time did you spend making these? They look really good, but wow that must have been time consuming

Collapse
 
kerthin profile image
Roden

I spent about 5-6 hours on each card. Most of the time was spent on the selection of the design. And I spent about 2-3 days on the last card from the casino.

Collapse
 
maxart2501 profile image
Massimo Artizzu

That's actually quite fast!
I'm impressed.

Thread Thread
 
kerthin profile image
Roden

Thanks! Given that the cards consist of very simple elements, it did not take a lot of time to create them.

Collapse
 
kroeneen profile image
Kroeneen

Cards look amazing 😍. The last card is the best

Collapse
 
kerthin profile image
Roden

Thanks 🎉

Collapse
 
gmarv profile image
Gmar-V

This cards are awesome, you make a REALLY REALLY good job my man, congratulations

Collapse
 
kerthin profile image
Roden

Thank you for appreciating my work

Collapse
 
amircahyadi profile image
Amir-cahyadi

Amazing ❤️

Collapse
 
kerthin profile image
Roden

Thanks