Last active
April 2, 2020 22:38
-
-
Save cre-o/836c26a23b552168be9d055b641ff52c to your computer and use it in GitHub Desktop.
Friend asked me for help (creative way to render chess board)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>*** unnamed text ***</title></head><body> | |
<style> | |
:root { | |
--green: rgb(146, 159, 99); | |
} | |
table.CHESS | |
{ | |
border-collapse: collapse; | |
overflow: hidden; | |
position: relative; | |
} | |
table.CHESS td | |
{ | |
width: 50px; | |
height: 50px; | |
border: solid gray 1px; | |
position: relative; | |
} | |
table.CHESS tr { | |
background-color: #fff; | |
position: relative; | |
} | |
table.CHESS tr td:nth-child(odd) + td { | |
background-color: #000; | |
} | |
table.CHESS tr:nth-child(even) { | |
background-color: #000; | |
border-color: 1px solid gray; | |
padding: 1px; | |
} | |
table.CHESS tbody { | |
overflow: hidden; | |
} | |
table.CHESS tbody:before, table.CHESS tbody:after { | |
content: ''; | |
position: absolute; | |
display: inline-block; | |
z-index: 2; | |
height: 100%; | |
width: 10px; | |
top: 0; | |
} | |
table.CHESS tbody:before { | |
left: 0; | |
border-right: 1px solid gray; | |
} | |
table.CHESS tbody:after { | |
border-left: 1px solid gray; | |
margin-left: 9px; | |
right: 0; | |
} | |
table.CHESS tr:nth-child(even) td:nth-child(even) { | |
background-color: #fff; | |
border-color: gray; | |
} | |
table.CHESS tr:first-child td:after, table.CHESS tr:last-child td:after { | |
position: absolute; | |
width: 100%; | |
height: 10px; | |
content: ''; | |
background: var(--green); | |
display: inline-block; | |
left: 0; | |
} | |
table.CHESS tr:first-child td:after { | |
border-bottom: 1px solid gray; | |
top: 0; | |
} | |
table.CHESS tr:last-child td:after { | |
bottom: 0; | |
border-top: 1px solid gray; | |
} | |
table.CHESS tr td:first-child:before, table.CHESS tr td:last-child:before { | |
position: absolute; | |
height: 100%; | |
content: ''; | |
background: var(--green); | |
display: inline-block; | |
width: 10px; | |
top: 0; | |
} | |
table.CHESS tr td:first-child:before { | |
left: 0; | |
} | |
table.CHESS tr td:last-child:before { | |
right: 0; | |
} | |
table.CHESS tr:first-child td { | |
padding-top: 10px; | |
} | |
table.CHESS tr:last-child td{ | |
padding-bottom: 10px; | |
} | |
table.CHESS tr td:first-child { | |
padding-left: 10px; | |
} | |
table.CHESS tr td:last-child { | |
padding-right: 10px; | |
} | |
</style> | |
<table class='CHESS'> | |
<tr> | |
<td></td><td></td><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><td></td><td></td> | |
</tr> | |
<tr> | |
<td></td><td></td><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><td></td><td></td> | |
</tr> | |
<tr> | |
<td></td><td></td><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><td></td><td></td> | |
</tr> | |
<tr> | |
<td></td><td></td><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><td></td><td></td> | |
</tr> | |
<tr> | |
<td></td><td></td><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><td></td><td></td> | |
</tr> | |
</table> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment