A Pen by Dan Stuart.

CSS3-Table-Football.markdown

CSS3 Table Football

also known as table soccer, foosball, fussball

A Pen by Dan Stuart on CodePen.

License.

index.haml

.fussball-table
  .pitch
    .markings
      .halfway-line
      .blue-box
        .six-yard-box
      .red-box
        .six-yard-box
  .teams
    .blue-team
      .goalie
        .players
          .player
      .defence
        .players
          .player
          .player
      .mid-field
        .players
          .player
          .player
          .player
          .player
          .player
      .forwards
        .players
          .player
          .player
          .player
    .red-team
      .goalie
        .players
          .player
      .defence
        .players
          .player
          .player
      .mid-field
        .players
          .player
          .player
          .player
          .player
          .player
      .forwards
        .players
          .player
          .player
          .player

style.scss

@import "compass";
$green: rgb(39, 158, 49);
$tableLength: 500px;
$tableWidth: 275px;
$barDistance: 14.28571428571429;

.fussball-table {
  position: relative;
  z-index: 1;
  width: $tableLength; 
  height: $tableWidth;
  margin: 125px auto;
  .pitch {
    position: relative;
    width: 100%; 
    height: 100%;
    background: $green;
    &:before {
      content: " ";
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      box-shadow: inset 0px 0px 130px 60px rgba(0, 0, 0, 0.25);
    }
    &:after {
      content: " ";
      position: absolute;
      z-index: 10;
      top: -10px;
      left: -10px;
      height: 100%;
      width: 100%;
      // box-shadow: inset 0px 0px 130px 60px rgba(0, 0, 0, 0.25);
      border: 10px solid black;
    }
  }
  .markings {
    opacity: 0.9;
    div {
      background: white;
    }
    .halfway-line {
      position: absolute;
      left: 50%;
      height: 100%;
      width: 6px;
      margin-left: -3px;
      &:before {
        content: " ";
        position: absolute;
        top: 33%;
        left: -700%;
        height: 30%;
        width: 1500%;
        margin-left: -6px;
        background: $green;
        border: 6px solid white;
        border-radius: 50%;
      }
      &:after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        height: 12px;
        width: 12px;
        margin-left: -6px;              
        margin-top: -6px;
        background: white;              
        border-radius: 50%;
      }   
    }
    .blue-box, .red-box {
      position: absolute;
      top: 23.5%;
      width: 20%;
      height: 50%;
      background: $green;
      border: 6px solid white;
      &:before {
        content: " ";
        position: absolute;
        z-index: 1;
        top: 7.5%;
        right: -20%;
        height: 75%;
        width: 100%;
        border: 6px solid white;
        border-radius: 50%;
      }
      &:after {
        content: " ";
        position: absolute;
        z-index: 2;             
        right: 0;
        height: 100%;
        width: 100%;                    
        background: $green;
      }
      .six-yard-box {
        position: absolute;
        z-index: 3;
        top: 20%;
        left: -6px;
        width: 35%;
        height: 50%;
        background: $green;
        border: 6px solid white;
      }
    }
    .blue-box {
      left: -6px;         
    }
    .red-box {
      right: -6px;
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
    }
  }
  .teams {
    position: absolute;
    top: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    width: 92.5%;
    z-index: 15;
    > div {
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      > div {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 6px;
        margin: auto 0 auto -3px;               
        height: 160%;
        background: #f5f6f6;
        background: -webkit-linear-gradient(left, #f5f6f6 0%,#b9babf 20%,#878891 48%,#dddfe3 80%,#f5f6f6 100%);
        box-shadow: 15px 0px 5px 0px rgba(0, 0, 0, 0.1);
        &:after, &:before {
          content: " ";
          position: absolute;
          bottom: 0;
          width: 200%;
          height: 10%;
          margin-left: -50%;
          background: #959595;
          background: -webkit-linear-gradient(left, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
          box-shadow: 15px 0px 5px 0px rgba(0, 0, 0, 0.1);
          border-radius: 2px;
        }
        &:before {
          bottom: auto;                   
          top: 0;
          width: 110%;
          height: 2%;
          margin-left: -10%;
          border-radius:2px;
        }
      }
    }
    .goalie {
      left: $barDistance * 0%;
      .player:nth-of-type(1) {
        top: 50%;
      }
      .players {              
        &:before {                  
          top: 46%;
        }
        &:after {
          top: 54%;
        }
      }
    }
    .defence {
      left: $barDistance * 1%;
      .player:nth-of-type(1) {
        top: 40%;
      }
      .player:nth-of-type(2) {
        top: 60%;
      }
      .players {              
        &:before {                  
          top: 36%;
        }
        &:after {
          top: 64%;
        }
      }           
    }
    .mid-field {
      left: $barDistance * 3%;
      .player:nth-of-type(1) {
        top: 25%;
      }
      .player:nth-of-type(2) {
        top: 37.5%;
      }
      .player:nth-of-type(3) {
        top: 50%;
      }
      .player:nth-of-type(4) {
        top: 62.5%;
      }   
      .player:nth-of-type(5) {
        top: 75%;
      }
      .players {              
        &:before {                  
          top: 21%;
        }
        &:after {
          top: 79%;
        }
      }
    }
    .forwards {
      left: $barDistance * 5%;
      .player:nth-of-type(1) {
        top: 30%;
      }
      .player:nth-of-type(2) {
        top: 50%;
      }
      .player:nth-of-type(3) {
        top: 70%;
      }
      .players {              
        &:before {                  
          top: 26%;
        }
        &:after {
          top: 74%;
        }
      }
    }
    .red-team {         
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
    }
    .players {
      &:before, &:after {
        content: " ";
        width: 10px;
        background: black;
        height: 10px;
        position: absolute;
        left: -2px;
        top: 50%;
        margin-top: -5px;
        opacity: 0.75;
      }           
    }

    .player {
      position: absolute;
      top: 50%;
      left: 4px;
      margin-top: -10px;
      &:before {                  
        content: " ";
        position: absolute;                     
        width: 18px;
        height: 20px;
        left: -10px;
        border-radius: 3px;
        box-shadow: inset -2px 0px 5px 0px rgba(0, 0, 0, 0.5);
      }
      &:after {                   
        //content: " ";
        position: absolute;
        width: 12px;
        height: 12px;
        left: -6px;
        top: 3px;
        border-radius: 100%;
        box-shadow: inset -2px 0px 5px 0px rgba(0, 0, 0, 0.25);
      }
    }
    .red-team {
      .player {               
        &:before {
          background-color: red;
        }
        &:after {
          background-color: lighten(red, 10%);
        }
      }
    }
    .blue-team {
      .player {               
        &:before {
          background-color: blue;
        }
        &:after {
          background-color: lighten(blue, 10%);
        }
      }
    }
  }
}