Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created March 5, 2012 22:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alexmwalker/1981666 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alexmwalker/1981666 to your computer and use it in GitHub Desktop.
Download ZIP
Galaga!! pew pew pew!
Raw
dabblet.css
/**
* Galaga!! pew pew pew!
*/
body{
padding-top:30px;
font-family:sans-serif;
font-size:28px;
background: #000;
color:#fff;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
div {
width:70%;
position:relative;
top:-150px;
animation: hz 13s infinite cubic-bezier(.2,0,.8,1);
}
div span{
height:60%;
width:45px;
font-size:60px;
display:block;
position:absolute;
transform: rotate(90deg);
animation: hz 3s infinite cubic-bezier(.2,0,.8,1);
}
div span:before{
height:60%;
width:45px;
content:"H";
top:36px;left:-15px;
font-size:60px;
display:block;
position:absolute;
transform: rotate(-90deg);
}
ul{
width:80%;
position:relative;
overflow:hidden;
overflow-y:visible;
height:480px;
animation: hz 10s infinite cubic-bezier(.2,0,.8,1);
}
li{
margin:5px;
list-style:none;
position:relative;
float:left;
color:#67d;
width:60px;
height:30px;
margin-left:10px;
font-weight:700;
animation: flap 1s infinite;
}
li a{
display:block;
text-decoration:none;
line-height:90%;
text-indent:0;
border:1px #fcc solid;
border-radius:6px;
width:60px;
height:30px;
color:#999;
font-size:10px;
text-align:center
}
li a:first-child:hover {
height:8px;
bottom:0;
left:2px;
background:#900;
position:absolute;
font-size:9px;
font-weight:400;
border:0 none;
border-radius:0 0 4px ;
width:58px;
color:#fff;
}
/*li:after, li:before {
display:none;
font-size:55px;
content:"ത";
text-indent:-18px;
top:8px;
outline:1px red dashed;
background-size:150% -50%;
display:block;
margin:-10px;
position:absolute;
font-weight:700;
width:12px;
height:23px;
border-radius:50%;
background:green;
}
li:after {
width:auto;
position:relative;
color:yellow;
font-weight:400;
text-indent:0px;
height:20px;
content:"♚";/*ൠ*/
/*font-size:24px;
top:0px; left:-5px;
background:red;
}*/
li:nth-child(6) {
animation: dive 11s 3s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite;
}
li:nth-child(5) {
animation: dive 10s 13s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite;
}
li:nth-child(2) {
animation: dive 12s 7s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite;
}
li:nth-child(3) {
animation: dive 9s 9s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite;
}
@keyframes hz { /* horizontal movement */
0%,100% {left:0;}
50% {left:180px;}
}
@keyframes flap {
0%,100% {font-size:55px;}
50% {font-size:52px;}
}
@keyframe pew {
0%,100% {background: linear-gradient(top, rgba(255,255,255,0) 1%,rgba(255,255,255,1) 4%,rgba(255,255,255,1) 9%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 13%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */}
100% {background: linear-gradient(top, rgba(255,255,255,0) 1%,rgba(255,255,255,1) 4%,rgba(255,255,255,1) 9%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 13%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */}
}
@keyframes dive1 { /* vertical movement */
0% {left:0;transform:rotate(0deg)}
4.0% {top:-20px;}
6% {left:-60px;}
8.0% {transform:rotate(-360deg)}
12.0% {transform:rotate(-330deg)}
20.0% {left:120px;}
32.0% {left:50px;top:480px;transform:rotate(-400deg)}
32.1% {top:-90px}
40.0% {left:0;top:0;transform:rotate(-360deg) }
100% {left:0;top:0;transform:rotate(-360deg) }
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="./">Default</a>
<a href="http://twitter.com/jacobrask">Jacob Rask</a></li>
<li><a href="#stripes">Stripes</a>
<a href="http://vasilis.nl">Vasilis van Gemert</a></li>
<li><a href="#notepad">Notepad</a>
<a href="http://twitter.com/eworm_">Wout Mager</a></li>
<li><a href="#bbubles">Bbubles</a>
<a href="http://cssing.org.ua">akella &amp; Genn</a></li>
<li><a href="#swiss">Swiss</a>
<a href="http://chrsl.net">Chris Lee</a></li>
<li><a href="#turnaround">Turn around</a>
<a href="http://www.basvandorst.nl">Bas van Dorst</a></li>
<li><a href="#whirl">Whirl</a>
<a href="https://twitter.com/iamvdo">Vincent De Oliveira</a></li>
<li><a href="#bundler_inspired">BundlerInspired</a>
<a href="https://github.com/PhilG">PhilG</a></li>
<li><a href="#oldie">Oldie</a>
<a href="http://pointlessone.org">Alexander Mankuta</a></li>
<li><a href="#typhon">Typhon</a>
<a href="http://eswat.ca">ESWAT</a></li>
<li><a href="#cube">Cube</a>
<a href="http://be.net/iurevych">Sergii Iurevych</a></li>
<li><a href="#northern-lights">Northern Lights</a>
<a href="http://potapoff.org">Igor «SkAZi» Potapov</a></li>
<li><a href="#skewed">Skewed</a>
<a href="http://twitter.com/sntxrrr">Paul Steffens</a></li>
<li><a href="#moonlight">Moonlight</a>
<a href="http://twitter.com/derSchepp">Christian "Schepp" Schaefer</a></li>
<li><a href="#typewriter">Typewriter</a>
<a href="http://thisbythem.com">Lance Alton Troxel</a></li>
<li><a href="#oldschool">Old School</a>
<a href="http://romanliutikov.com">Roman Liutikov</a></li>
<li><a href="#m6tt">m6tt</a>
<a href="http://m6tt.com">Matt Woodfield</a></li>
<li><a href="#1024-bytes">1024-bytes</a>
<a href="http://github.com/faisalman">Faisalman</a></li>
<li><a href="#molokai">Molokai</a>
<a href="http://designtomarkup.com">Kien Nguyen</a></li>
<li><a href="#android">Android</a>
<a href="http://agat.in">Aleksej Romanovskij</a></li>
<li><a href="#bookshelf">Bookshelf</a>
<a href="https://github.com/SelenIT">SelenIT</a></li>
<li><a href="#geocities">GeoCities</a>
<a href="https://github.com/asavartsov/">Alexey Savartsov</a></li>
<li><a href="#imbatman">I'm Batman</a>
<a href="./">Paul Reid</a></li>
<li><a href="#facetime">Facetime</a>
<a href="http://twitter.com/bnijenhuis">Bernard Nijenhuis</a></li>
<li><a href="#cloudy">Cloudy</a>
<a href="http://twitter.com/putnik">Sergey Leschina</a></li>
<li><a href="#greymatter">Grey Matter</a>
<a href="http://pepelsbey.net">Vadim Makeev</a></li>
<li><a href="#blue_square">Blue square</a>
<a href="http://twitter.com/hsablonniere">Hubert Sablonnière</a></li>
<li><a href="#helvetipink">HelvetiPink</a>
<a href="http://billkeller.name">Bill Keller</a></li>
<li><a href="#tangerine">Tangerine</a>
<a href="http://twitter.com/TheBenCourt">Ben Court</a></li>
<li><a href="#summersun">Summer Sun</a>
<a href="http://twitter.com/tanya_peasgood">Tanya Peasgood</a></li>
<li><a href="#lessismore">Less is More</a>
<a href="http://twitter.com/rob_balfre">Rob Balfre</a></li>
<li><a href="#inset">Inset</a>
<a href="http://www.hachemuda.com">Guillermo Latorre</a></li>
<li><a href="#legible">Legible</a>
<a href="http://lumens.se">Reimund Trost</a></li>
<li><a href="#greenlemon">Green Lemon</a>
<a href="http://twitter.com/d_radunz">Dirk Radunz</a></li>
<li><a href="#wired">Wired</a>
<a href="http://www.digitalwaxworks.com">Brett DeWoody</a></li>
<li><a href="#juizstar">Juiz Star</a>
<a href="http://www.creativejuiz.fr">Geoffrey Crofte</a></li>
<li><a href="#wolfr">Wolfr</a>
<a href="http://twitter.com/wolfr_">Johan Ronsse</a></li>
<li><a href="#fortyeight1k">fortyeight1k</a>
<a href="http://michael.haschke.biz">Michael Haschke</a></li>
<li><a href="#columns">Columns</a>
<a href="http://rmcreative.ru">Alexander Makarov</a></li>
<li><a href="#trainspotting">Trainspotting</a>
<a href="http://www.hboaventura.com">Henrique Boaventura</a></li>
<li><a href="#ribbon">ribbon</a>
<a href="http://oodavid.com">David King</a></li>
<li><a href="#solarized">Solarized</a>
<a href="http://twitter.com/heirenton">heirenton</a></li>
<li><a href="#openwater">Open Water</a>
<a href="https://github.com/gilmoreorless">Gilmore Davidson</a></li>
<li><a href="#html5colors">HTML5 Colors</a>
<a href="http://www.theweblife.com">Michael Garrett Jones</a></li>
<li><a href="#heart_css">heart css</a>
<a href="https://github.com/kjchoy">Choy Kum Jin</a></li>
<li><a href="#sourcy">Sourcy</a>
<a href="http://kizu.ru/en/">Roman Komarov</a></li>
<li><a href="#terminal">Terminal</a>
<a href="http://twitter.com/PanyaKor">Mikhail Korepanov</a></li>
<li><a href="#goodnight_moon">Goodnight Moon</a>
<a href="http://livingcode.org">Dethe Elza</a></li>
<li><a href="#fancy">Fancy"</a>
<a href="http://www.trustweb.it">Michele Cipriani</a></li>
<li><a href="#textlevels">Text Levels</a>
<a href="http://www.patrickmann.com">Patrick Mann</a></li>
<li><a href="#yelo">Yelo</a>
<a href="http://bartdebruin.nl">Bart de Bruin</a></li>
<li><a href="#spartan">Spartan</a>
<a href="http://trentm.com">Trent Mick</a></li>
<li><a href="#paper">paper</a>
<a href="http://daniel-rauber.de">Daniel Rauber</a></li>
<li><a href="#lucuma">Lúcuma</a>
<a href="http://twitter.com/germanmartinez">Germán Martínez</a></li>
<li><a href="#freshsoda">Fresh Soda</a>
<a href="http://jungundwillich.de">Jan Ortgies</a></li>
<li><a href="#ev">Ev</a>
<a href="http://evangeneer.net">Mathieu Rochette</a></li>
<li><a href="#b4ya11y">B4y &amp; A11y</a>
<a href="http://twitter.com/etBen">Benoit Klein</a></li>
<li><a href="#adaptype">Adaptype</a>
<a href="http://vasilis.nl">Vasilis van Gemert</a></li>
<li><a href="#bleubleu">BleuBleu</a>
<a href="http://www.leightonrodney.com">Leighton Rodney</a></li>
<li><a href="#simpl">Simpl</a>
<a href="http://www.neofyt.com">Neofyt</a></li>
<li><a href="#mitchiru">Mitchiru</a>
<a href="http://banquo.de">Michael Fritz</a></li>
<li><a href="#casoy">Casoy</a>
<a href="http://twitter.com/robertboloc">Robert Boloc</a></li>
<li><a href="#thesimpleswede">The Simple Swede</a>
<a href="http://www.tobiasphoto.com">Tobias Akeblom</a></li>
<li><a href="#photobox">PhotoBox</a>
<a href="http://stinkyinkshop.co.uk">Stinkyink</a></li>
<li><a href="#desktop">Desktop</a>
<a href="http://webmolot.com">Webmolot</a></li>
<li><a href="#expandable">Expandable</a>
<a href="http://twitter.com/curlybrace">Dennis Madvedovsky</a></li>
<li><a href="#bluebrush">BlueBrush</a>
<a href="https://twitter.com/jennyhao">Jenny Hao</a></li>
<li><a href="#noticeboard">Notice Board</a>
<a href="http://www.about.me/niharsawant">Nihar Sawant</a></li>
<li><a href="#aapl">AAPL</a>
<a href="http://twitter.com/joffreyjaffeux">Joffrey Jaffeux</a></li>
<li><a href="#yollaw">Yollaw</a>
<a href="http://franzose.in">Yan Ivanov</a></li>
<li><a href="#stretchy">Stretchy</a>
<a href="http://twitter.com/mistadikay">Denis Koltsov</a></li>
<li><a href="#smile">smile</a>
<a href="http://twitter.com/realmuecke">Michael Scharnagl</a></li>
<li><a href="#toolbar">Toolbar</a>
<a href="http://chervonny.ru/en/">Maxim Chervonny</a></li>
<li><a href="#roundrect">Round Rect</a>
<a href="http://www.bitstorm.org">Edwin Martin</a></li>
<li><a href="#therhythm">The Rhythm</a>
<a href="http://kizu.ru/en/">Roman Komarov</a></li>
<li><a href="#simplebox">SimpleBox</a>
<a href="http://raelmax.com">Rael Max</a></li>
</ul>
<div><span> ⫷ </span></div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment