CSS Cards by Krylan

CSS Cards by Krylan

Thanks for your interest in this project.
It includes one CSS file with rules for making a full classical card deck with animations and cards arrangenents.
It has easy to edit variables, which define size, shadows and corner rounding for your cards.

If you have any questions or comments, you can contact me on my portfolio.

How to use

To start with CSS Cards it's good to make general div containing all card elements (hands, decks etc.).
For set of cards used for classical games I'm giving class 'classic-playset'.
Inside, we can arrange set of cards in various formations – defined by me are 'hand' and 'deck'.
You can also turn cards back with animations just by adding or removing 'back' class to the 'card' element.

Inside card you can make div with attributes 'data-suit' and 'data-rank'.
These two are responsible for corner marks of cards.
In 'data-suit' there are defined following values: [hearts, diamonds, clubs, spades, red, black].
First four are defining symbol, which is showed below rank of card – next two are for color-only (for example for jokers).
In 'data-rank' you can write anything you want.
It depends on you, which symbols you want on cards. It's also displayed in corners of card.
Inside of this div element you can write a symbol, which is displayed on center of card, or attach a background-image for a card (to do so, you need to add new rule for specific card with 'background-image' rule only).

You can, of course, make a custom card set with this CSS file. I would be really happy to see new creations and other uses of this project.

Demo 1

Just click on the card and see what you got.
All you need to do to get this effect is toggle class 'back' for 'card' element.
For example, for 'onclick' event do "this.classList.toggle('back');".

Demo 2

In this demo I used three cards in 'hand' formation. In this formation cards on hover are exposed to the player.


Demo 3

Now I used second formation called a 'deck'. Cards are stacked in a pile, so players can draw new cards.
You can stock them as much as you want and you can see how many cards are in the deck.
To make cards turned back, you need to use class 'back' on 'card' element.

Note, that content of 'card' elements are empty. I can't let players cheat using developer console, right?