EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

HTML,
BODY {
  height: 100%;
}

BODY {
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02) 0.5em, rgba(255, 255, 255, 0) 0.5em, rgba(255, 255, 255, 0) 1em), radial-gradient(#66ccff, #002266);
  background-size: cover;
  font: 20px/0 Georgia, serif;
}

INPUT {
  display: none;
}

.board {
  position: absolute;
  width: 20em;
  height: 22em;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #472c1f;
  background: url(http://img-fotki.yandex.ru/get/9509/5091629.99/0_7d2a0_19c2b714_XL.jpg) 0 center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), 0 0 1em rgba(107, 66, 46, 0.8) inset, 0 0 0 0.2em rgba(115, 64, 38, 0.2) inset;
}

.board-inner {
  position: absolute;
  top: 3em;
  right: 1em;
  bottom: 1em;
  left: 1em;
  border: 0.1em solid rgba(163, 118, 92, 0.6);
  background: linear-gradient(rgba(107, 66, 46, 0.4) 0.1em, rgba(107, 66, 46, 0) 2px) repeat, linear-gradient(90deg, rgba(107, 66, 46, 0.4) 0.1em, rgba(107, 66, 46, 0) 2px) repeat;
  background-size: 1em 1em;
  background-position: -.1em -.1em;
}

.board-inner:before {
  content: '';
  display: block;
  position: absolute;
  top: 2.8em;
  left: 2.8em;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: rgba(115, 70, 38, 0.7);
  box-shadow: 6em 0 rgba(115, 70, 38, 0.7), 12em 0 rgba(115, 70, 38, 0.7), 0 6em rgba(115, 70, 38, 0.7), 6em 6em rgba(115, 70, 38, 0.7), 12em 6em rgba(115, 70, 38, 0.7), 0 12em rgba(115, 70, 38, 0.7), 6em 12em rgba(115, 70, 38, 0.7), 12em 12em rgba(115, 70, 38, 0.7);
}

.wrapper-labels {
  position: absolute;
  z-index: 1;
  top: .5em;
  right: .5em;
  bottom: .5em;
  left: .5em;
}

LABEL {
  display: inline-block;
  width: 0px;
  height: 0px;
}

LABEL DIV {
  width: 17em;
  height: 17em;
}

.show-next {
  display: block;
  position: absolute;
  width: 3em;
  height: 1.7em;
  overflow: hidden;
  top: -2.89em;
  left: -1.5em;
  right: -1.5em;
  margin: auto;
  border-radius: 1.5em;
  box-shadow: 0 0 0 0.2em rgba(115, 64, 38, 0.2), 0 0 0.15em 0.1em rgba(115, 70, 38, 0.8) inset;
  box-sizing: border-box;
}

.show-next:before,
.show-next:after {
  content: '';
  display: block;
  position: absolute;
  top: -.45em;
  bottom: -.45em;
  width: 0em;
  height: 0em;
  margin: auto;
  border-radius: 50%;
  background-position: -0.1em -0.1em;
  box-shadow: 0 0 3px rgba(163, 143, 41, 0.7) inset, 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.6);
  transition: .3s;
}

.show-next:before {
  left: -.45em;
  right: .65em;
}

.show-next:after {
  left: .65em;
  right: -.45em;
}

:not(:checked) + :not(:checked) ~ .show-next:before,
:checked + INPUT ~ .show-next:before,
INPUT + :checked ~ .show-next:after {
  width: .9em;
  height: .9em;
}

SPAN {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  margin: 0;
  cursor: pointer;
}

INPUT + :checked ~ .set1 SPAN {
  z-index: 2;
}

SPAN:before {
  content: "";
  color: red;
  display: block;
  position: absolute;
  top: -1em;
  right: -1em;
  bottom: -1em;
  left: -1em;
  width: 0.8em;
  height: 0.8em;
  margin: auto;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(163, 143, 41, 0.7) inset, 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 100000s;
}

SPAN:active:before {
  opacity: 1;
  transition: opacity 0s;
}

.show-next:after,
.set1 SPAN:before {
  background: radial-gradient(#ffffff, #ffffff 0.1em, #c0c0c0 0.4em);
}

.show-next:before,
.set2 SPAN:before {
  background: radial-gradient(#333333, #000000 0.4em);
}

HTML

Recommendation

Join Effecthub.com