also known as table soccer, foosball, fussball
A Pen by Dan Stuart on CodePen.
also known as table soccer, foosball, fussball
A Pen by Dan Stuart on CodePen.
.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 |
@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%); | |
} | |
} | |
} | |
} | |
} |