Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Autres

Reproduire des cartes avec CSS Grid layout

Utilisation de CSS Grid layout pour créer les cartes et animation CSS. Faites vos jeux, rien ne va plus !

  • AA
  • AA
  • AA
  • AA

Code :

HTML


<div class=fond-jeu>
<ul class="cartes">
<li class="carreau rouge"><em>A</em><b>♦</b><strong>♦</strong><span>♦</span><em>A</em></li>
<li class="trefle noir"><em>A</em><b>♣</b><strong>♣</strong><span>♣</span><em>A</em></li>
<li class="coeur rouge"><em>A</em><b>♥</b><strong>♥</strong><span>♥</span><em>A</em></li>
<li class="pic noir"><em>A</em><b>♠</b><strong>♠</strong><span>♠</span><em>A</em></li>
</ul>
</div>


CSS


*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

.cartes{
	
position:relative;
display:grid;
justify-items:center;
grid-gap:1rem
	
	}
	
	
.cartes li{
	
padding-inline:.25rem;
padding-block:.25rem;
list-style:none;
background:linear-gradient(to bottom,#fff,#ddd); 
border-radius:5px; 
box-shadow:0 0 5px #555;
height:320px; 
width:220px; 
position:relative;
display:grid;
grid-template-columns: auto;
grid-template-rows: 15% 10% 50% 10% 15%;
	}

.cartes li strong{
font-size:8rem;
place-self:center;
	
	}

.cartes li em{

font-size:3rem
	
	}
	
em,b{
	
align-self:center;
font-style:normal
	
	}
	
b,li span{
	
	font-size:2rem
	
	}

b{
	
	margin-inline-start:.5rem
	
	}	
	
	
.rouge{color:red}
.noir{color:black}



.cartes li span{
	
margin-inline-end:.5rem;
place-self:end
	
	}
	
.cartes li em:last-child{transform:rotate(180deg)}

/*table de jeu*/

@media (min-width:37.5rem){
		
.cartes{grid:auto/repeat(2,1fr)}	
		
}
	
@media (min-width:62.75rem){
	
	
	
.fond-jeu{
border:1px solid #8d672a;
margin:auto;
border-radius:5px;
background:#e2ac5a;
background:linear-gradient(to bottom,#b97e1e 0,#cb9836 50%,#e2ac5a 100%);
width:100%;
height:500px
	
	}
	
/*tapis vert de la table de jeu*/
	
.cartes{
width:98%;
box-shadow:inset 0 0 20px #295626;
height:480px;
margin:10px auto;
border-radius:5px;
background:#579a53;
background:linear-gradient(to bottom,#526730,#579a53);
grid-template-columns: repeat(4, 1fr);
align-items:end;
grid-gap:initial
	
	
	}

.cartes li{
height:300px; 
width:200px; 
opacity:0;
margin-block-end:-30rem
	
	}
		
	
.pic{
	order:-4;
animation:pic .2s 1s linear forwards
	
	}
	
.coeur{
	
order:-3;
z-index:1;
animation:coeur .2s 1.4s linear forwards,coeurbis .8s 3.4s forwards
	
	}
	
.trefle{
	
order:-2;
z-index:2;
animation:trefle .2s 1.8s linear forwards,treflebis .8s 3.3s forwards
	
	}

.carreau{
	
order:-1;
z-index:3;
animation:carreau .2s 2.2s linear forwards,carreaubis .8s 3.2s forwards
	
	}

	
	
	
	
/* 1ere animation */
@keyframes coeur{
	
0%{
	opacity:0
	
	}
	
100%{
opacity:1;
transform:translatex(0) translatey(-36rem) rotate(-2deg)
	
	}
	
	}

@keyframes trefle{
	
0%{
	
opacity: 0
	
	}
100%{
	
opacity: 1;
transform: translatex(-60px) translatey(-36rem) rotate(2deg)}
	
	}

@keyframes carreau{
	
0%{

opacity:0
	
	}
	
100%{
	
opacity: 1;
transform:translatex(-100px) translatey(-35rem) rotate(8deg)
	
	}
	
	}

@keyframes pic{
	
0%{
	
	opacity: 0
	
	}
	
100%{

opacity: 1;
transform: translatex(60px) translatey(-35rem) rotate(-8deg)
	
	}
	
	}

/* seconde animation */
@keyframes carreaubis{
	
0%{
	
transform:translatex(-100px) translatey(-35rem) rotate(8deg)
	
	}
	
100%{
	
transform:translatex(-540px) translatey(-35rem) rotate(-8deg)
	
	}
	
	}

@keyframes treflebis{
	
0%{
	
transform:translatex(-60px) translatey(-36rem) rotate(2deg)
	
	}
	
100%{
	
transform:translatex(-340px) translatey(-35rem) rotate(-8deg)
	
	}
	
	}

@keyframes coeurbis{
	
0%{
	
transform:translatex(0px) translatey(-36rem) rotate(-2deg)
	
	}
	
100%{
	
	transform:translatex(-140px) translatey(-35rem) rotate(-8deg)
	
	}
	
	}
	
	
	

	
	
	}

Support navigateurs :

css-animation

css-grid

Source, inspiration, ressources :

Source originale

Voir aussi sur ce blog les animations CSS

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.