Skip to content

Instantly share code, notes, and snippets.

@crazyrohila

crazyrohila/dabblet.css

Created March 2, 2013 19:24
Show Gist options
  • Save crazyrohila/5072742 to your computer and use it in GitHub Desktop.
Save crazyrohila/5072742 to your computer and use it in GitHub Desktop.
Download ZIP
car steering
Raw
dabblet.css
/**
* car steering
*/
#circle {
width: 300px;
height: 300px;
border: 25px solid #2F4F4F;
border-radius: 50%;
position: relative;
left: 30%;
top: 20%;
z-index: 1000;
box-shadow: inset 0px 0px 15px #008080, 0px 0px 15px #008080;
}
.bar {
width: 40px;
height: 120px;
position: absolute;
transform-origin: bottom;
z-index: -999;
border-radius: 30%;
background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}
.bar:nth-child(1) {
transform: rotate(60deg);
left: 0%;
top: 35%;
}
.bar:nth-child(2) {
left: 45%;
top: 0%;
}
.bar:nth-child(3) {
transform: rotate(-55deg);
right: 0%;
top: 36%;
}
#inner-circle {
width: 100px;
height: 100px;
background-image: linear-gradient(left, #C0C0C0, gray);
position: relative;
left: 35%;
top:30%;
border-radius: 50%;
}
a {
width: 60px;
height: 60px;
background: black;
border-radius: 50%;
position: absolute;
left:20%;
top:20%;
}
a:active {
box-shadow: 3px 1px 15px white;
top: 20.5%;
left: 20.5%;
background-image: linear-gradient(left, black, gray);
}
audio {
width: 40px;
position: absolute;
top: 25%;
left: 18%;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="steering">
<div id="circle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div id="inner-circle">
<a href="#" id="horn"><audio controls>
<source src="http://soundjax.com/reddo/91935%5ECARHORN.mp3" type="audio/mpeg">
Install some better browser.
</audio></a>
</div>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment