billiard – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 14:28:54 +0000 en-US hourly 1 Pool Table and Billiard Balls Pure CSS Animation https://thingography.com/css-pool-table/ https://thingography.com/css-pool-table/#comments Sun, 04 Mar 2018 18:01:48 +0000 http://thingography.com/?p=1784 /* ==== Pool Table (table=slotview for JS purposes) Start ==== */ #slot-view { margin: 10px auto 0px auto; background-color: #339933; border: 50px double #333333; border-radius: 20px; width: 795px; height: 440px; position: relative; left: -3em; box-shadow: 0 0 5px 5px #000000; box-sizing: content-box; } @media screen and (max-width: 1100px) { #slot-view {transform: scale(0.8); left: -10%;} } @media screen and (max-width: 760px) { #slot-view {transform: scale(0.6); left: -20%;} } @media screen and (max-width: 620px) { #slot-view {transform: scale(0.4); left: -50%;} } @media screen and (max-width: 480px) { #slot-view {transform: scale(0.2); left: -70%;} } /* adds rim-color on the table edge */ #table-rim { margin: -33px 0px 0px -33px; border: 16px solid #673E36; background-color: transparent; position: absolute; border-radius: 20px; width: 829px; height: 474px; box-sizing: content-box;

} #dot { margin: -20px 0px 0px 180px; background: radial-gradient(ellipse at center, #ffffff 3%,#ffffff 15%,#0a0e0a 40%,#0a0e0a 50%,#0a0e0a 60%,#ffffff 85%,#ffffff 100%); width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; border-radius: 50%; opacity:0.6; } .one, .two, .three, .four, .five, .six { width: 60px; height: 55px; position: absolute; border-radius: 50%; background-color: #666666; background: radial-gradient(ellipse at center, #4c4c4c 0%,#444444 12%,#444444 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); z-index: 5; } .one {margin-top: -40px;margin-left: -40px;} .one, .six {transform: rotate(45deg);} .two {margin-top: -45px; margin-left: 360px;} .three, .four {transform: rotate(-45deg);} .three {margin-top: -40px;margin-left: 780px;} .four {margin-top:425px;margin-left: -40px;} .five {margin-top: 430px;margin-left: 360px;} .six {margin-top: 425px;margin-left: 780px;} #cue, #ball-1, #ball-2, #ball-3, #ball-4, #ball-5, #ball-6, #ball-7, #ball-8, #ball-9, #ball-10 { border: 2px solid #000000; border-radius: 50%; position: absolute; width: 30px; height: 30px; top: 50%; left: 50%; overflow: hidden; z-index: 10; } #cue { margin: -20px 0px 0px 175px; background-color: #F7F7F7; animation: cue 8s linear; } @keyframes cue { 0% {transform: translate( 0px, 0px);} 20% {transform: translate(-475px, 210px);} 30% {transform: translate(-575px, 80px);} 75% {transform: translate( 140px,-210px);} 85% {transform: translate( 190px,-100px);} 100% {transform: translate( 0px, 0px);} } #ball-1 { margin: -225px 0px 0px 351px; background-color: #FFFF00; animation: sink 4s linear; animation-delay: 6s; } #ball-1 .number { animation: number 4s linear; animation-delay: 6s; } @keyframes number { 0% {margin: -6px 0px 0px -6px;} 50% {margin:-20px 0px 0px 10px;} 100%{margin:-20px 0px 0px 10px;} } @keyframes sink { 0% {transform: translate( 0px, 0px); opacity:1;} 50% {transform: translate(40px, -20px) scale(1.0); opacity:1;} 90% {transform: translate(40px, -20px) scale(0.76); opacity:1;} 100%{transform: translate(40px, -10px) scale(0.7); opacity:0;} } #ball-2 { margin: -140px 0px 0px -120px; background-color: #0000FF; } #ball-3 { margin: 50px 0px 0px -250px; background-color: #FF0000; } #ball-4 { margin: -190px 0px 0px -350px; background-color: #990099; } #ball-5 { margin: 100px 0px 0px -300px; background-color: #FF9900; } #ball-6 { margin: 70px 0px 0px -180px; background-color: #006600; background: linear-gradient(to bottom, #ffffff 0%,#ffffff 20%,#006600 20%,#006600 50%,#006600 80%,#ffffff 80%,#ffffff 100%); transform: rotate(45deg); } #ball-7 { margin: 150px 0px 0px 220px; background-color: #800000; } #ball-8 { margin: -180px 0px 0px 50px; background-color: #000000; } #ball-9 { margin: -125px 0px 0px -350px; background-color: #FFFF00; background: linear-gradient(to bottom, #ffffff 0%,#ffffff 20%,#ffff00 20%,#ffff00 50%,#ffff00 80%,#ffffff 80%,#ffffff 100%); } #ball-10 { margin: -200px 0px 0px -170px; background-color: #0000FF; background: linear-gradient(to bottom, #ffffff 0%,#ffffff 20%,#0000ff 20%,#0000ff 50%,#0000ff 80%,#ffffff 80%,#ffffff 100%); transform: rotate(85deg); } .number { margin: -6px 0px 0px -6px; border-radius: 50%; background-color: #FFFFFF; width: 12px; height: 12px; position: absolute; top: 50%; left: 50%; text-align: center; font-size: 10px; font-weight: bold; line-height: 10px; } /* just moving the numbers on the balls around for more realistic look */ #ball-4 .number {margin-left: -13px;} #ball-2 .number {margin: -1px 0 0 1px;} #ball-9 .number {margin-left: -10px;} #ball-8 .number {margin: 5px 0 0 -10px;} #ball-5 .number {margin: -8px 0 0 5px;} /* =========== Replay Button ============= */ #control-bar { width: 100%; margin-right: auto; margin-left: auto; text-align: center; } .play { padding: 0em 0.5em; margin: 1.3em auto 1em auto; border: 5px solid #000000; font-size: 1.6em; line-height: 1.4em; text-align: center; z-index: 99; } .play:hover { border-color: #FF3300; background: #FFFF99; cursor: pointer; color: #999; }

1
2
3
4
5
14
7
8
9
10

Pure CSS Pool Table and Billiard Balls

]]> https://thingography.com/css-pool-table/feed/ 1