HTML
<div class="wrapper">
<input type="checkbox" class="ch ch-1" id="ch-1">
<input type="checkbox" class="r r-1" id="r-1">
<div class="cell">
<label for="ch-1" class="l-ch">X</label>
<label for="r-1" class="l-r">O</label>
</div>
<input type="checkbox" class="ch ch-2" id="ch-2">
<input type="checkbox" class="r r-2" id="r-2">
<div class="cell">
<label for="ch-2" class="l-ch">X</label>
<label for="r-2" class="l-r">O</label>
</div>
<input type="checkbox" class="ch ch-3" id="ch-3">
<input type="checkbox" class="r r-3" id="r-3">
<div class="cell">
<label for="ch-3" class="l-ch">X</label>
<label for="r-3" class="l-r">O</label>
</div>
<!-- **************************************** -->
<input type="checkbox" class="ch ch-4" id="ch-4">
<input type="checkbox" class="r r-4" id="r-4">
<div class="cell">
<label for="ch-4" class="l-ch">X</label>
<label for="r-4" class="l-r">O</label>
</div>
<input type="checkbox" class="ch ch-5" id="ch-5">
<input type="checkbox" class="r r-5" id="r-5">
<div class="cell">
<label for="ch-5" class="l-ch">X</label>
<label for="r-5" class="l-r">O</label>
</div>
<input type="checkbox" class="ch ch-6" id="ch-6">
<input type="checkbox" class="r r-6" id="r-6">
<div class="cell">
<label for="ch-6" class="l-ch">X</label>
<label for="r-6" class="l-r">O</label>
</div>
<!-- **************************************** -->
<input type="checkbox" class="ch ch-7" id="ch-7">
<input type="checkbox" class="r r-7" id="r-7">
<div class="cell">
<label for="ch-7" class="l-ch">X</label>
<label for="r-7" class="l-r">O</label>
</div>
<input type="checkbox" class="ch ch-8" id="ch-8">
<input type="checkbox" class="r r-8" id="r-8">
<div class="cell">
<label for="ch-8" class="l-ch">X</label>
<label for="r-8" class="l-r">O</label>
</div>
<input type="checkbox" class="ch ch-9" id="ch-9">
<input type="checkbox" class="r r-9" id="r-9">
<div class="cell">
<label for="ch-9" class="l-ch">X</label>
<label for="r-9" class="l-r">O</label>
</div>
<div class="results"></div>
</div>
CSS
HTML {
font: 20px/1 'Verdana', sans-serif
}
BODY {
background: linear-gradient(rgba(0,0,0,.03) 1px, transparent 2px),
linear-gradient(90deg,rgba(0,0,0,.03) 1px, transparent 2px);
background-size: 1em 1em;
background-color: #DDD;
}
.wrapper {
position: absolute;
display: block;
width: 12em;
height: 12em;
top: -6em;
right: -6em;
bottom: -6em;
left: -6em;
margin: auto;
border: 1px solid #DDD;
border-width: 0 2px 2px 0;
background: linear-gradient(#DDD 1px, transparent 2px),
linear-gradient(90deg,#DDD 1px, transparent 2px);
background-size: 4em 4em;
background-color: white;
box-shadow: 0 0 0 .8em white;
}
INPUT {
position: absolute;
display: none;
}
.cell {
position: relative;
display: block;
float: left;
width: 4em;
height: 4em;
border-radius: 50%;
}
LABEL {
display: block;
position: relative;
z-index: 1;
float: left;
width: 2em;
height: 4em;
opacity: .3;
line-height: 4em;
text-align: center;
cursor: pointer;
color: #333;
transition: .5s opacity;
}
.l-ch {
text-indent: .7em;
}
.l-r {
text-indent: -.7em;
}
LABEL:hover {
opacity: 1;
}
LABEL:before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 1em;
right: 1em;
bottom: 1em;
left: 1em;
border-radius: 50%;
}
/* Checked
-------------------------- */
.ch:checked + .r + .cell .l-ch:before {
background: tomato;
}
.ch + .r:checked + .cell .l-r:before {
background: skyblue;
}
.ch:checked + .r + .cell .l-r,
.ch + .r:checked + .cell .l-ch {
display: none;
}
.ch:checked + .r + .cell .l-ch,
.ch + .r:checked + .cell .l-r {
width: 4em;
text-indent: 0;
opacity: 1;
color: #FFF;
}
/* Results
-------------------------- */
.results {
display: none;
position: absolute;
z-index: 1;
top: 1px;
left: 1px;
margin: auto;
width: 12em;
height: 12em;
overflow: hidden;
background: rgba(255,255,255,.7);
opacity: .9;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
.results:before,
.results:after {
display: inline-block;
width: 12rem;
height: 12rem;
vertical-align: top;
line-height: 12rem;
font-size: 3rem;
text-indent: 0;
text-shadow: 0 0 5px rgba(0,0,0,.4);
color: #FFF;
transition: all .4;
}
.results:before {
content: "X";
background: tomato;
}
.results:after {
content: "O";
background: skyblue;
}
.results:hover:before,
.results:hover:after {
text-shadow: 0 1px 5px rgba(0,0,0,.3);
line-height: 11.8rem;
}
:checked ~ :checked ~ :checked
~ :checked ~ :checked ~ :checked
~ :checked ~ :checked ~ :checked~ .results {
display: block;
}
:checked ~ :checked ~ :checked
~ :checked ~ :checked ~ :checked
~ :checked ~ :checked ~ :checked~ .results:before {
content: "New game?";
background: #DDD;
font-size: 1.3em;
}
/*
X X X
- - -
- - -
*/
.ch:checked ~ .ch:checked ~ .ch:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
}
/*
0 0 0
- - -
- - -
*/
.r:checked ~ .r:checked ~ .r:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
text-indent: -12em;
}
/*
- - -
X X X
- - -
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .ch:checked ~ .ch:checked ~ .ch:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
}
/*
- - -
0 0 0
- - -
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .r:checked ~ .r:checked ~ .r:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
text-indent: -12em;
}
/*
- - -
- - -
X X X
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .ch:checked ~ .ch:checked ~ .ch:checked
~ .results {
display: block;
}
/*
- - -
- - -
0 0 0
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .r:checked ~ .r:checked ~ .r:checked
~ .results {
display: block;
text-indent: -12em;
}
/*
X - -
X - -
X - -
*/
.ch:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .ch:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .ch:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
}
/*
0 - -
0 - -
0 - -
*/
.r:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .r:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .r:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
text-indent: -12em;
}
/*
- X -
- X -
- X -
*/
INPUT ~ INPUT ~ .ch:checked ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ .ch:checked ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ .ch:checked ~ INPUT ~ INPUT
~ .results {
display: block;
}
/*
- 0 -
- 0 -
- 0 -
*/
INPUT ~ INPUT ~ .r:checked ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ .r:checked ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ .r:checked ~ INPUT ~ INPUT
~ .results {
display: block;
text-indent: -12em;
}
/*
- - X
- - X
- - X
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ .ch:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ .ch:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ .ch:checked
~ .results {
display: block;
}
/*
- - 0
- - 0
- - 0
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ .r:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ .r:checked
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ .r:checked
~ .results {
display: block;
text-indent: -12em;
}
/*
X - -
- X -
- - X
*/
.ch:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ .ch:checked ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ .ch:checked
~ .results {
display: block;
}
/*
0 - -
- 0 -
- - 0
*/
.r:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ .r:checked ~ INPUT ~ INPUT
~ INPUT ~ INPUT ~ INPUT ~ INPUT ~ .r:checked
~ .results {
display: block;
text-indent: -12em;
}
/*
- - X
- X -
X - -
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ .ch:checked
~ INPUT ~ INPUT ~ .ch:checked ~ INPUT ~ INPUT
~ .ch:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
}
/*
- - 0
- 0 -
0 - -
*/
INPUT ~ INPUT ~ INPUT ~ INPUT ~ .r:checked
~ INPUT ~ INPUT ~ .r:checked ~ INPUT ~ INPUT
~ .r:checked ~ INPUT ~ INPUT ~ INPUT ~ INPUT
~ .results {
display: block;
text-indent: -12em;
}
