Skip to content

Instantly share code, notes, and snippets.

@gcyrillus

gcyrillus/dabblet.css

Forked from anonymous/dabblet.css
Created June 7, 2013 23:00
Show Gist options
  • Save gcyrillus/5733001 to your computer and use it in GitHub Desktop.
Save gcyrillus/5733001 to your computer and use it in GitHub Desktop.
Download ZIP
Chess board CSS3
Raw
dabblet.css
/* Chess board CSS3 */
html {width:100%;height:100%;display:table;}
body {perspective: 500px;transform-style: preserve-3d;
display:table-cell;height:100%;vertical-align:middle;}
.eaten {width:411px;;height:2.8em;border:1px solid;margin:0 auto;font-size:25px;}
.eaten span {display:inline-block;transform : rotate(-45deg);}
table {position:relative;
perspective: 500px;
transform-origin: 0% 5%;
transform: rotatex(40deg) rotatey(0deg) rotatez(0deg) ;
widh:80%;margin:auto;table-layout:fixed;
border-collapse:collapse;box-shadow:0 0 1px;, 0 6px 0px -1px;background:#def;;
border-bottom:5px solid #035;}
th, td {width:10%;table-layout:fixed;border:1px solid;vertical-align:middle;padding:0;}
table tr:nth-child(1n) td span:nth-child(1n) {
z-index:0;position:relative;
display:inline-block;
width:100%;
text-align:center;
font-size:30px;
font-weight:bold;
background:transparent;
transform: rotatex(-25deg) rotatey(0deg) rotatez(0deg) translatey(-4px);
text-shadow:0px -2px gray;, -1px -2px 1px #111,-2px -2px 1px #222,-3px -3px 1px #333,-4px -4px 1px #444,-5px -5px #555;}
img {max-width:100%;vertical-align:top;width:100%;height:100%;max-height:100%;opacity:0.5;}
tr:nth-child(odd) :nth-child(odd),tr:nth-child(even) :nth-child(even),th{background:#06a;}
[draggable="true"] {cursor:move;}
span:hover {z-index:1!important}
span:hover:before {
content:attr(id);
position:absolute;
background:red;
color:white;
bottom:-1.9em;
z-index:1!important;
display:block;
white-space:nowrap;
border:solid;
box-shadow:3px -5px 5px black;
etransform:rotatex(-15deg) rotatey(0deg) rotatez(0deg)
}
Raw
dabblet.html
<script>function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
</script>
<div class="eaten" id="eaten" ondrop="drop(event)" ondragover="allowDrop(event)" > </div>
<table summary="Chess board">
<thead>
<tr>
<th></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=A" alt="A"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=B" alt="B"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=C" alt="C"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=D" alt="D"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=E" alt="E"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=F" alt="F"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=G" alt="G"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=H" alt="H"/></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=A" alt="A"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=B" alt="B"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=C" alt="C"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=D" alt="D"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=E" alt="E"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=F" alt="F"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=G" alt="G"/></th>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=H" alt="H"/></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=8" alt="8"/></th>
<td id="cell8a" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-rook-a">&#9814;</span></td>
<td id="cell8b" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-knight-b">&#9816;</span></td>
<td id="cell8c" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-bishop-c">&#9815;</span></td>
<td id="cell8d" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-king-d">&#9812;</span></td>
<td id="cell8e" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-queen-e">&#9813;</span></td>
<td id="cell8f" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-bishop-f">&#9815;</span></td>
<td id="cell8g" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-knight-g">&#9816</span></td>
<td id="cell8h" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-rook-h">&#9814;</span></td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=8" alt="8"/></th>
</tr>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=7" alt="7"/></th>
<td id="cell7a" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-a">&#9817;</span></td>
<td id="cell7b" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-b">&#9817;</span></td>
<td id="cell7c" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-c">&#9817;</span></td>
<td id="cell7d" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-d">&#9817;</span></td>
<td id="cell7e" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-e">&#9817;</span></td>
<td id="cell7f" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-f">&#9817;</span></td>
<td id="cell7g" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-g">&#9817;</span></td>
<td id="cell7h" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="white-pawn-h">&#9817;</span></td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=7" alt="7"/></th>
</tr>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=6" alt="6"/></th>
<td id="cell6a" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell6b" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell6c" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell6d" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell6e" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell6f" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell6g" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell6h" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=6" alt="6"/></th>
</tr>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=5" alt="5"/></th>
<td id="cell5a" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell5b" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell5c" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell5d" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell5e" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell5f" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell5g" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell5h" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=5" alt="5"/></th>
</tr>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=4" alt="4"/></th>
<td id="cell4a" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell4b" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell4c" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell4d" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell4e" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell4f" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell4g" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell4h" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=4" alt="4"/></th>
</tr>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=3" alt="3"/></th>
<td id="cell3a" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell3b" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell3c" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell3d" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell3e" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell3f" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell3g" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<td id="cell3h" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=3" alt="3"/></th>
</tr>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=2" alt="2"/></th>
<td id="cell2a" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-a">&#9823;</span></td>
<td id="cell2b" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-b">&#9823;</span></td>
<td id="cell2c" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-c">&#9823;</span></td>
<td id="cell2d" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-d">&#9823;</span></td>
<td id="cell2e" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-e">&#9823;</span></td>
<td id="cell2f" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-f">&#9823;</span></td>
<td id="cell2g" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-g">&#9823;</span></td>
<td id="cell2h" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-pawn-h">&#9823;</span></td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=2" alt="2"/></th>
</tr>
<tr>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=1" alt="1"/></th>
<td id="cell1a" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-rook-a">&#9820;</span></td>
<td id="cell1b" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-knight-b">&#9822;</span></td>
<td id="cell1c" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-bishop-c">&#9821;</span></td>
<td id="cell1d" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-king-d">&#9818;</span></td>
<td id="cell1e" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-queen-e">&#9819;</span></td>
<td id="cell1f" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-bishop-f">&#9821;</span></td>
<td id="cell1g" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-knight-g">&#9822;</span></td>
<td id="cell1h" ondrop="drop(event)" ondragover="allowDrop(event)"><span draggable="true" ondragstart="drag(event)" class="blanc" id="black-rook-h">&#9820;</span></td>
<th><img src="http://dummyimage.com/40/ffffff/000000.jpg&text=1" alt="1"/></th>
</tr>
</tbody>
</table>
Raw
dabblet.js
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment