Let’s discuss the game’s CSS code in a breakdown of the most important parts:
body: Center the text, set the font and background, and apply a color and shadow to the text.
body {
text-align: center;
font-family: ‘Droid Serif’, arial, serif;
background: #a46740 url(../images/bg.jpg);
color: #ccc;
text-shadow: 0 1px 0 #222;
}
h1: Defines the style of the main header.
a, a:visited: Styles for links, including transitions and hover effects.
h1 {
font-weight: bold;
text-shadow: 0 2px 0 #222;
}
a, a:visited {
color: #aea;
text-decoration: none;
-webkit-transition: all .3s;
padding: 5px;
}
a:hover {
color: #000;
background: #aea;
text-shadow: none;
}
#game: Define the main container of the game with rounded edges, shadows, and a background.
#game {
border-radius: 10px;
border: 1px solid #666;
-webkit-box-shadow: 0 -1px 0 #999, 0 1px 0 #999, inset 0 1px 6px #000;
position: relative;
background: #232 url(../images/table.jpg);
width: 500px;
height: 460px;
margin: 0 auto;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
}
.card: Defines the properties of the cards, including perspective and transitions.
.card {
-webkit-perspective: 600;
width: 80px;
height: 120px;
position: absolute;
-moz-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
}
.face: Styles for the card faces, with transitions and visibility of the backside.
.face {
border-radius: 10px;
width: 100%;
height: 100%;
position: absolute;
-moz-transition-property: opacity, -moz-transform, -moz-box-shadow;
-moz-transition-duration: .3s;
-webkit-transition-property: opacity, -webkit-transform, -webkit-box-shadow;
-webkit-transition-duration: .3s;
transition-property: opacity, transform, box-shadow;
transition-duration: .3s;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front: Define el estilo de la cara frontal de las cartas.
.front {
background: #999 url(../images/deck.png) 0 -480px;
z-index: 10;
}
.back: Define el estilo de la cara trasera de las cartas y su rotación.
.back {
background: #efefef url(../images/deck.png);
-moz-transform: rotate3d(0,1,0,-180deg);
-webkit-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
z-index: 8;
}
.card:hover .face: Applies shadows to cards when hovering over them.
.card:hover .face{
-webkit-box-shadow: 0 0 20px #aaa;
box-shadow: 0 0 10px #aaa;
}
.card-flipped: Defines the style of the flipped cards, including rotation and z-index.
.card-flipped .face{
-webkit-box-shadow: 0 0 20px #aaa;
box-shadow: 0 0 10px #aaa;
}
.card-flipped .front {
-moz-transform: rotate3d(0,1,0,180deg);
-webkit-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
z-index: 8;
}
.card-flipped .back {
-moz-transform: rotate3d(0,1,0,0deg);
-webkit-transform: rotate3d(0,1,0,0deg);
transform: rotate3d(0,1,0,0deg);
z-index: 10;
}
.card-removed: Estilo para las cartas eliminadas, haciéndolas invisibles.
.card-removed {
opacity: 0;
}
Defines the base position for each specific card in the deck.
.cardAJ {background-position: -800px 0;}
.cardAQ {background-position: -880px 0;}
.cardAK {background-position: -960px 0;}
.cardBJ {background-position: -800px -120px;}
.cardBQ {background-position: -880px -120px;}
.cardBK {background-position: -960px -120px;}
.cardCJ {background-position: -800px -240px;}
.cardCQ {background-position: -880px -240px;}
.cardCK {background-position: -960px -240px;}
.cardDJ {background-position: -800px -360px;}
.cardDQ {background-position: -880px -360px;}
.cardDK {background-position: -960px -360px;}
#popup: Styles for the endgame popup, including font, size, shadows, and transitions.
#popup {
font-family: ‘Orbitron’, serif;
font-size: 28px;
font-weight: 700;
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;
}
#popup h1 {
font-weight: 400;
}
#popup-box: Popup container with additional styles and transitions.
#popup-box {
width: 400px;
height: 300px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;
}
#popup-box small {
font-size: .6em;
}
#popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;
}
#popup.hide #popup-box{
margin-top: -800px;
}
.ribbon: Styles for decorative ribbon, including position, size, and shadows.
.ribbon.hide {
display: none;
}
.ribbon {
float: left;
position: absolute;
left: -7px;
top: 165px;
z-index: 0;
font-size: .5em;
text-transform: uppercase;
text-align: right;
}
.ribbon-body {
height: 14px;
background: #ca3d33;
padding: 6px;
z-index: 100;
-webkit-box-shadow: 2px 2px 0 rgba(150,120,70,.4);
border-radius: 0 5px 5px 0;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,.3);
}
.triangle{
position: relative;
height: 0px;
width: 0;
left: -5px;
top: -32px;
border-style: solid;
border-width: 6px;
border-color: transparent #882011 transparent transparent;
z-index: -1;
}
This CSS code defines the visual styles and transitions for a card game, ensuring an engaging and seamless user experience.
This game is straightforward in its concept of matching cards. In this case, the game matches not only pictures, but also the card, using the cards on which poker is based to make memorization more selective and the game more attractive.
The level of customization is great, being able to adapt the images without the need to modify the code. However, the main coding of the game has been explained in the previous sections.
In the folder IMAGES we can find 4 elements to change.
The appearance of the game is defined by the images indicated above.
Deck.png where you can change pair elements. We can find 52 different elements than you can changed for green issues
The design of the back of each card is also defined.
Playing game is very simple, just selecting level
It will allow you to use the cursor to display two cards at a time. When two cards are identical, they will be hidden and the game will end when all cards have been hidden because they have been properly matched. The playing time is one more element to motivate the player to match all the cards in the shortest possible time.
In this case, the two cards do not match, they will return to the previous position without being removed from the game board.
Now the two cards do match and will be eliminated or hidden from the game board.
Even if the drawing matches, the pairs must also match on the symbol on the card. In this case, we have the same drawing, but not the same card symbol, that’s why they don’t match:
The successive pairings leave fewer cards on the game board:
End of the game with all cards properly paired