InicioCurso de Frontend Developer
Curso de Frontend Developer
1

Tablero de Ajedrez Browser

Harry A.
hadevelopux
627

Una creación super básica de un Tablero de Ajedrez formato browser, lo más documentado posible y sencillo de entender:

/* Configuracion Global */body {
    height: 100vh;
    min-height: 870px;
    font-family: sans-serif;
    color: #c4c8ce;
    background-color: #1e2229;
    margin: 0;
}
body,
header,
footer,
section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
}
header,
footer {
    flex-direction: row;
}
headerdiv,
footerdiv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;

}
section {
    display: flex;
    align-content: center;
}

Creamos una pequeña utilidad para reusar en varios sectores:

/* Utilidades */.bg-black {
    background-color: #0ae98a;
}
.bg-white {
    background-color: #ffffff;
}

Nombre del jugador y puntaje Header y Footer de la interfaz gráfica:

/* Textos de la interfaz */.playerh1,
.scoreh2 {
    color: #ffffff;
    margin-top: 0;
}
.playerp,
.scorep {
    margin: 0;
}
.playerpspan,
.scorepspan {
    font-weight: 600;
    color: #1e2229;
    padding: 0.1rem0.2rem;
    margin: 05px;
}
.piece{
    font-size: 40px;
}
.piece.black{
    color: #0ae98a;
}
.piece.white{
    color: #c4c8ce;
}


/* Puntaje de la interfaz */.scoreul {
    display: flex;
    justify-content: end;
    margin: 0;
    padding: 0;
    list-style: none;
}
.scoreli {
    display: inline-block;
    width: 20px;
    margin: 01rem;
}
.scoreli:first-child {
    margin-left: 0;
}
.scoreli:last-child {
    margin-right: 0;
}
.score.piece{
    font-size: 20px;
}

Creación del tablero, coloración, grillas y posicionamiento en capas, lo más documentado posible y sencillo de entender:

/* Tablero en la interfaz */.board-wrapper {
    width: 602px;
    border: 2px solid #000000;
    position: relative;
}
.board {
    width: 100%;
    height: 100%;
    position: relative;
}
.board-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
}
.board-rowdiv,
.board-rowdiva {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.board-rowdiva{
    width: 100%;
    text-decoration: none;
}
.board-rowdiva:hover::after{
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid #ffffff;
    position: absolute;
}
.board-row:nth-child(1n)div:nth-child(1n) {
    background-color: #1e2229;
}
.board-row:nth-child(1n)div:nth-child(2n) {
    background-color: #000000;
}
.board-row:nth-child(2n)div:nth-child(1n) {
    background-color: #000000;
}
.board-row:nth-child(2n)div:nth-child(2n) {
    background-color: #1e2229;
}
.board-row:first-childdiv:nth-child(1n),
.board-row:nth-child(1n)div:first-child,
.board-row:last-childdiv:nth-child(1n),
.board-row:nth-child(1n)div:last-child {
    width: 100%;
    height: 58px;
    align-items: center;
    background-color: transparent;
}
.board.pieces{
    position: absolute;
    top: 0;
}
.board.pieces.board-rowdiv {
    background-color: hsl(180deg 100% 50% / 20%);
}
.board.pieces.board-row:nth-child(1n)div:nth-child(1n),
.board.pieces.board-row:nth-child(1n)div:nth-child(2n),
.board.pieces.board-row:nth-child(2n)div:nth-child(1n),
.board.pieces.board-row:nth-child(2n)div:nth-child(2n) {
    background-color: transparent;
}

Y por último el HTML completo con las fichas en formato Símbolo Unicode, para poderse apreciar y cargar mucho más rápido en el navegador:

<!-- Cabezera --><header><!-- Datos del primer jugador --><divclass="player"><h1>Player One</h1><p>Pieces <spanclass="bg bg-black">Black</span></p></div><!-- Estadísticas del jugador --><divclass="score"><h2>Score: 000</h2><ul><liclass="piece white"title="Black Roock L">♖</i></li><liclass="piece white"title="Black Knight L">♘</i></li></ul></div></header><!-- End --><!-- Seccion --><section><divclass="board-wrapper"><!-- Tablero de fondo con guia --><divclass="board"><divclass="board-row"><div></div><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div><div></div></div><divclass="board-row"><div>8</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>8</div></div><divclass="board-row"><div>7</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>7</div></div><divclass="board-row"><div>6</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>6</div></div><divclass="board-row"><div>5</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>5</div></div><divclass="board-row"><div>4</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>4</div></div><divclass="board-row"><div>3</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>3</div></div><divclass="board-row"><div>2</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>2</div></div><divclass="board-row"><div>1</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>1</div></div><divclass="board-row"><div></div><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div><div></div></div></div><!-- Tablero absoluto de las piezas --><divclass="board pieces"><divclass="board-row"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><divclass="board-row"><div></div><div><ahref="#"class="piece black"title="Black Roock L">♜</a></div><div><ahref="#"class="piece black"title="Black Knight L">♞</a></div><div><ahref="#"class="piece black"title="Black Bishop L">♝</a></div><div><ahref="#"class="piece black"title="Black Queen">♛</a></div><div><ahref="#"class="piece black"title="Black King">♚</a></div><div><ahref="#"class="piece black"title="Black Bishop R">♝</a></div><div><ahref="#"class="piece black"title="Black Knight R">♞</a></div><div><ahref="#"class="piece black"title="Black Rook R">♜</a></div><div></div></div><divclass="board-row"><div></div><div><ahref="#"class="piece black"title="Black Pawn A">♟</a></div><div><ahref="#"class="piece black"title="Black Pawn B">♟</a></div><div><ahref="#"class="piece black"title="Black Pawn C">♟</a></div><div><ahref="#"class="piece black"title="Black Pawn D">♟</a></div><div><ahref="#"class="piece black"title="Black Pawn E">♟</a></div><div><ahref="#"class="piece black"title="Black Pawn F">♟</a></div><div><ahref="#"class="piece black"title="Black Pawn G">♟</a></div><div><ahref="#"class="piece black"title="Black Pawn H">♟</a></div><div></div></div><divclass="board-row"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><divclass="board-row"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><divclass="board-row"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><divclass="board-row"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><divclass="board-row pieces-black"><div></div><div><ahref="#"class="piece white"title="White Pawn A">♙</a></div><div><ahref="#"class="piece white"title="White Pawn B">♙</a></div><div><ahref="#"class="piece white"title="White Pawn C">♙</a></div><div><ahref="#"class="piece white"title="White Pawn D">♙</a></div><div><ahref="#"class="piece white"title="White Pawn E">♙</a></div><div><ahref="#"class="piece white"title="White Pawn F">♙</a></div><div><ahref="#"class="piece white"title="White Pawn G">♙</a></div><div><ahref="#"class="piece white"title="White Pawn H">♙</a></div><div></div></div><divclass="board-row pieces-black"><div></div><div><ahref="#"class="piece white"title="White Roock L">♖</a></div><div><ahref="#"class="piece white"title="White Knight L">♘</a></div><div><ahref="#"class="piece white"title="White Bishop L">♗</a></div><div><ahref="#"class="piece white"title="White Queen">♕</a></div><div><ahref="#"class="piece white"title="White King">♔</a></div><div><ahref="#"class="piece white"title="White Bishop R">♗</a></div><div><ahref="#"class="piece white"title="White Knight R">♘</a></div><div><ahref="#"class="piece white"title="White Rook R">♖</a></div><div></div></div><divclass="board-row"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div></section><!-- End --><!-- Footer --><footer><!-- Datos del segundo jugador --><divclass="player"><h1>Player Two</h1><p>Pieces <spanclass="bg bg-white">White</span></p></div><!-- Estadísticas del jugador --><divclass="score"><h2>Score: 000</h2><ul><liclass="piece black"title="Black Roock L">♜</i></li><liclass="piece black"title="Black Knight L">♞</i></li></ul></div></footer><!-- End -->

Deberia verse de esta manera:

Gracias por su tiempo y espero que les guste, saludos.

0
hace 23 días
Escribe tu comentario
+ 2

Entradas relacionadas

9

Como crear una tarjeta personal con HTML y CSS

Una tarjeta personal es una gran iniciativa para empezar a incorporar los conocimientos adquiridos en HTML y CSS. Aqui detallo los pasos par
marcosdelinglesgmailcom
marcosdelinglesgmailcom
12

Notas del curso en Notion 🐱‍🏍

Hola comunidad, les quiero compartir mis notas de este maravilloso curso en Notion, están hechas con el método Cornell, para que puedan repa
fabiantcc
fabiantcc
14

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos
robledocorrea
robledocorrea
1

Como implementar un diseño responsivo

¿Alguna vez has entrado a una página web desde tu celular y se ve desordenada o difícil de usar? Eso sucede cuando no tiene un diseño respon
barrerodaniela2345
barrerodaniela2345