A digital statistics game implemented in pure css3_html/css_WEB-ITnose

Today I would like to share with you a digital statistics game implemented purely in CSS3. The rule of this game is to add all the numbers to equal 72. The digital buttons in this game are very beautiful and can be borrowed when needed. Let’s take a look at the renderings:

Online preview Source code download

Implemented code.

html code:

 <h1>        CSS Counter Game</h1>    <section>        <h2>            Pick the numbers that add up to 72:</h1>            <input id="a" type="checkbox"><label for="a">64</label>            <input id="b" type="checkbox"><label for="b">16</label>            <input id="c" type="checkbox"><label for="c">-32</label>            <input id="d" type="checkbox"><label for="d">128</label>            <input id="e" type="checkbox"><label for="e">4</label>            <input id="f" type="checkbox"><label for="f">-8</label>            <span class="sum"></span>    </section>

css3 code:

 body        {            counter-reset: sum;        }                #a:checked        {            counter-increment: sum 64;        }        #b:checked        {            counter-increment: sum 16;        }        #c:checked        {            counter-increment: sum -32;        }        #d:checked        {            counter-increment: sum 128;        }        #e:checked        {            counter-increment: sum 4;        }        #f:checked        {            counter-increment: sum -8;        }                .sum::before        {            content: '= ' counter(sum);        }                /* the rest is just to make things pretty */                body        {            margin: 32px;            font: 700 32px/1 'Droid Sans' , sans-serif;            color: #fff;            background-color: #583f3f;        }                h1        {            margin: 0 0 32px;            font-size: 48px;        }                h2        {            margin: 0 0 8px 8px;            font-size: inherit;        }                section        {            margin-bottom: 16px;            padding: 16px;            border-radius: 4px;            overflow: hidden;            background-color: rgba(255, 255, 255, .1);        }                input        {            position: absolute;            left: -9999px;        }                label        {            float: left;            margin: 8px;            padding: 16px;            border-radius: 4px;            border: solid 2px rgba(255, 255, 255, .4);            background-color: rgba(255, 255, 255, .2);            cursor: pointer;            transition: all .1s;        }                label::before        {            display: inline;        }                input:checked + label        {            border: solid 2px #fff;            background-color: rgba(255, 255, 255, .4);            box-shadow: 0 0 10px #fff;        }                span        {            float: left;            margin: 8px;            padding: 18px;            border-radius: 4px;            background-color: rgba(0, 0, 0, .1);        }                #a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #e:not(:checked) ~ #f:checked ~ .sum::after        {            content: ' (hooray!)';        }