Skip to content

B
bootcamp02-css-ejercicio-001
Commit 33ebd9b3 by roshka
Options

Tablero con css

parents
Showing with 147 additions and 0 deletions
estilo.css 0 → 100644
body{
background: #008b8b;
color: #eee;
font-family: sans-serif;
text-align: center;
}
#tablero{
background: url(http://i0.kym-cdn.com/photos/images/original/001/303/313/2e6.jpg);
box-shadow: 0 10px 10px -6px rgba(0, 0, 0,);
border-radius: 3px;
border-collapse: collapse;
width: 400px;
height: 400px;
margin: auto;
}
#tablero td{
color: #222;
font-size: 36px;
text-shadow: 1px 1px 1px rgba(255, 255, 255);
width: 50px;
height: 50px;
}
#tablero tr:nth-child(odd) td:nth-child(even),
#tablero tr:nth-child(even) td:nth-child(odd){
background: rgb(0, 0, 0);
}
#tablero tr:nth-child(n+7) td{
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0);
}
#tablero tr:nth-child(odd) td:nth-child(even):hover, #tablero tr:nth-child(even) td:nth-child(odd):hover{
background: gray;
}
#tablero tr:nth-child(odd) td:nth-child(odd):hover, #tablero tr:nth-child(even) td:nth-child(even):hover{
background: skyblue;
}
\ No newline at end of file
tablero2.html 0 → 100644
<html lang="es">
<head>
<title>Tablero de Ajedrez</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1, maximun-scale-1">
<link rel="stylesheet" href="estilo.css">
<style>
#tablero:hover {
background-color: skyblue;
}
</style>
</head>
<body>
<h1>Tablero de Ajedrez</h1>
<table id="tablero">
<tablero tr:nth-child(odd) td:nth-child(even)></tablero>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment