Skip to content

Instantly share code, notes, and snippets.

@FernandaBernardo

FernandaBernardo/dabblet.css

Created July 7, 2014 16:50
Show Gist options
  • Save FernandaBernardo/8b98810d388a1d2406d3 to your computer and use it in GitHub Desktop.
Save FernandaBernardo/8b98810d388a1d2406d3 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.right, .left, .up, .down {
padding: 1em 2em;
}
.pacman {
position: relative;
left: -16px;
background-color: #ff0;
width: 40px;
height: 40px;
border-radius: 50%;
transition-property: margin-top, margin-left;
transition-duration: 0;
transition-delay: 999999s;
transition-timing-function: linear;
}
.right:active ~ .tela .pacman {
margin-left: 88px;
}
.up:active ~ .tela .pacman {
margin-top: -88px;
}
.down:active ~ .tela .pacman {
margin-top: 88px;
}
.left:active ~ .tela .pacman {
margin-left: -88px;
}
.left:active ~ .tela .pacman,
.right:active ~ .tela .pacman,
.up:active ~ .tela .pacman,
.down:active ~ .tela .pacman {
transition: margin-top 2s linear,
margin-left 2s linear;
}
.tela {
position: relative;
margin: 0 auto;
padding: 128px 112px;
box-sizing: border-box;
width: 224px;
height: 256px;
overflow:hidden;
box-shadow: 0 0 20px rgba(255,255,255,0.25),
0 2px 1px rgba(255,255,255,0.15);
background-color: #000;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<button class="up"></button>
<button class="left"></button>
<button class="right"></button>
<button class="down"></button>
<div class="tela">
<div class="pacman"></div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment