Bonjour,
Je dois faire un Damier en CSS (avec les carreaux en noir et blanc évidemment) en faisant ressortir les lignes en gris
Si quelqu'un peut m'aider ça serait vraiment sympa
Je dois faire un Damier en CSS (avec les carreaux en noir et blanc évidemment) en faisant ressortir les lignes en gris
Si quelqu'un peut m'aider ça serait vraiment sympa
Lista de comentários
Réponse:
Voici le code complet pour créer un damier de 8 lignes et 8 colonnes en CSS avec des carreaux en noir et blanc et des lignes en gris ressortant grâce à la propriété box-shadow :
.damier {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.carreau {
background-color: #fff;
box-shadow: 0 0 0 1px #ccc;
}
.carreau:nth-child(odd) {
background-color: #000;
}
Voici un exemple de code HTML qui utilise le code CSS précédent pour créer un damier de 8 lignes et 8 colonnes :
Copy code
<div class="damier">
<div class="carreau"></div>
<div class="carreau"></div>
<div class="carreau"></div>
<!-- ... -->
</div>
Notez que vous devez inclure le code CSS dans votre page HTML soit en l'intégrant directement entre des balises <style> dans la section <head> de votre page, soit en incluant un fichier CSS externe en utilisant la balise <link>.
Voici comment inclure le code CSS directement dans votre page HTML :
Copy code
<head>
<style>
.damier {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.carreau {
background-color: #fff;
box-shadow: 0 0 0 1px #ccc;
}
.carreau:nth-child(odd) {
background-color: #000;
}
</style>
</head>
Et voici comment inclure un fichier CSS externe :
Copy code
<head>
<link rel="stylesheet" href="/chemin/vers/mon/fichier.css">
</head>