Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created April 19, 2012 00:59
Show Gist options
  • Save alexmwalker/2417655 to your computer and use it in GitHub Desktop.
Save alexmwalker/2417655 to your computer and use it in GitHub Desktop.
Download ZIP
Click scoring for PONG
Raw
dabblet.css
/**
* Click scoring for PONG
*/
body{overflow:hidden;
font-family:'Arial Narrow', sans-serif;
background:#000;
margin:0;
padding:0;
color:#0f0;
text-align:center;
text-transform:uppercase
}
body:before{ /*scan line effect */
content:"";
position:absolute;
margin:0;
padding:0;
background-image:linear-gradient(top, hsla(0,0%,0%,.3) 0%,hsla(0,0%,0%,0) 100%);
background-size:100% 4px;
width:100%;
height:100%;
z-index:99;
pointer-events: none;
}
body *{
text-shadow:0px 0px 3px rgba(90,255,90,.9), 0px 0px 3px rgba(90,255,90,.9), 0px 0px 7px rgba(90,255,90,.9)
}
h1{
text-align:center;
font:400 45px'';
}
#court{
margin:29px auto;
width:600px;
height:301px;
position:relative;
border: 4px dotted #3f3;
cursor: url(http://sitepoint.com/examples/css1k/bat.cur), text;
text-shadow:0px 0px 7px rgba(90,255,90,.9), 0px 0px 7px rgba(90,255,90,.9)
}
#court:before{/*net*/
left:50%;
content:"";
width:10px;
height:300px;
position:absolute;
border-left: 4px dashed #3f3;
}
#ball{
position:absolute;
width:20px;
height:20px;
display:block;
background:#3f3;
border-radius:50%;
box-shadow:0px 0px 7px rgba(90,255,90,.9), 0px 0px 7px rgba(90,255,90,.9);
animation: fadein 2s 1 linear;
left:3%;
top:50%
}
ul li{
list-style:none;
background:#000;
font-size:40px;
width:50px;
height:40px;
margin:5px;
text-align:center;
padding-top:10px;
position:absolute;
left:60%;
top:0;
opacity:0;
}
input{
display:none;
z-index:90
}
input#rd0{
display:block; /*reset button*/
top:-100px;
position:relative
}
input#rd0:checked + input ~ ul li:nth-of-type(1),
input#rd1:checked + input ~ ul li:nth-of-type(2),
input#rd2:checked + input ~ ul li:nth-of-type(3),
input#rd3:checked + input ~ ul li:nth-of-type(4),
input#rd4:checked + input ~ ul li:nth-of-type(5),
input#rd5:checked + input ~ ul li:nth-of-type(6){
animation:gone 1s 1 linear both;
animation-delay:2s
}
input#rd0:checked + input:hover ~ ul li:nth-of-type(1),
input#rd1:checked + input:hover ~ ul li:nth-of-type(2),
input#rd2:checked + input:hover ~ ul li:nth-of-type(3),
input#rd3:checked + input:hover ~ ul li:nth-of-type(4),
input#rd4:checked + input:hover ~ ul li:nth-of-type(5),
input#rd5:checked + input:hover ~ ul li:nth-of-type(6){
animation-delay:999s
}
input#rd0:checked ~ ul li:nth-of-type(1),
input#rd1:checked ~ ul li:nth-of-type(1),
input#rd2:checked ~ ul li:nth-of-type(2),
input#rd3:checked ~ ul li:nth-of-type(3),
input#rd4:checked ~ ul li:nth-of-type(4),
input#rd5:checked ~ ul li:nth-of-type(5){
opacity:1;
}
input:checked + input{
height:60px;
width:60px;
display:block;
appearance:none;
background:rgba(0,0,255,.2);
border:1px dotted #eee;
top:0;
left:0px;
position:absolute;
}
input:checked + input:hover{
background:rgba(0,255,255,.2);
}
#rd{
position:absolute;
outline:1px dashed #f00;
}
@keyframes leftright{
0%{left:5%}
100%{left:90%}
}
@keyframes topdown{
0%{top:5%}
100%{top:90%}
}
@keyframes gone{
0%{opacity:0}
100%{opacity:1}
}
@keyframes wait{
0%,100%{background:#333}
50%{background:#000}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>CSS3 PONG</h1>
<div id="court">
<input id="rd0" type="radio" name="set" checked>
<input id="rd1" type="radio" name="set">
<input id="rd2" type="radio" name="set">
<input id="rd3" type="radio" name="set">
<input id="rd4" type="radio" name="set">
<input id="rd5" type="radio" name="set">
<div id="ball"></div>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>WIN!</li>
</ul>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment