How to implement a chess with pure CSS

This article mainly introduces about how to use pure CSS to achieve a chess, has a certain reference value, now share to everyone, the need for friends can refer to

Source code Download

The full source code of the daily Front end Combat series is available from GitHub:

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

Define the DOM, with a total of 8 lists, each containing 8 elements:

<p class= "Chess" > <ul> <li></li><li></li><li></li><li>< /li> <li></li><li></li><li></li><li></li> </ul> < Ul> <li></li><li></li><li></li><li></li> <li></l i><li></li><li></li><li></li> </ul> <ul> <li></li ><li></li><li></li><li></li> <li></li><li></li> <li></li><li></li> </ul> <ul> <li></li><li></li>& Lt;li></li><li></li> <li></li><li></li><li></li><li ></li> </ul> <ul> <li></li><li></li><li></li><li& Gt;</li> <li></li><li></li><li></li><li></li> </ul> <ul> &LT;LI&GT;&L T;/li><li></li><li></li><li></li> <li></li><li></li ><li></li><li></li> </ul> <ul> <li></li><li></li& Gt;<li></li><li></li> <li></li><li></li><li></li> <li></li> </ul> <ul> <li></li><li></li><li></li>& Lt;li></li> <li></li><li></li><li></li><li></li> </u L></p>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:darkslategray;}

Define the background color and dimensions of the container (determined by the font size):

. chess {    Background-color:burlywood;    font-size:32px;}

Draw a grid-like chessboard:

UL {    display:table;    margin:0;    padding:0;} Li {    display:table-cell;    width:1.5em;    Height:1.5em;}

To set the color of the grid interleaving:

Ul:nth-child (odd) li:nth-child (even), ul:nth-child (even) li:nth-child (odd) {    Background-color:rgba (0, 0, 0, 0.6) ;}

To place a pawn on a board:

<p class= "Chess" > <ul> <li>& #9820;</li> <li>& #9822;</li>        <li>& #9821;</li> <li>& #9819;</li> <li>& #9818;</li> <li>& #9821;</li> <li>& #9822;</li> <li>& #9820;</li> </ ul> <ul> <li>& #9823;</li> <li>& #9823;</li> <li>&amp ; #9823;</li> <li>& #9823;</li> <li>& #9823;</li> <li>&# 9823;</li> <li>& #9823;</li> <li>& #9823;</li> </ul> <ul&        Gt <li></li><li></li><li></li><li></li> <li></li>< li></li><li></li><li></li> </ul> <ul> <li></li><l I></li>&lT;li></li><li></li> <li></li><li></li><li></li><li ></li> </ul> <ul> <li></li><li></li><li></li><li&    Gt;</li> <li></li><li></li><li></li><li></li> </ul> <ul> <li></li><li></li><li></li><li></li> <li&gt ;</li><li></li><li></li><li></li> </ul> <ul> <li> & #9823;</li> <li>& #9823;</li> <li>& #9823;</li> &LT;LI&GT;&A MP, #9823;</li> <li>& #9823;</li> <li>& #9823;</li> <li>&amp ; #9823;</li> <li>& #9823;</li> </ul> <ul> <li>& #9820; </l I> <li>&#9822;</li> <li>& #9821;</li> <li>& #9819;</li> <li>& #98 18;</li> <li>& #9821;</li> <li>& #9822;</li> <li>& #9820 ;</li> </ul></p>

Set the color of the pawn:

Ul:nth-child (-n+2) {    color:black;} Ul:nth-child (n+7) {    color:white;}

Finally, add a little stereoscopic effect to the chessboard:

. Chess {    border:0.2em solid tan;    box-shadow:0 0.3em 2em 0.4em rgba (0, 0, 0, 0.3);}

Done!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!