Skip to content

Instantly share code, notes, and snippets.

@aurelkurtula

aurelkurtula/dabblet.css

Created February 8, 2013 04:57
Show Gist options
  • Save aurelkurtula/4736692 to your computer and use it in GitHub Desktop.
Save aurelkurtula/4736692 to your computer and use it in GitHub Desktop.
Download ZIP
a snipet from Gridify (simplified)
Raw
dabblet.css
/**
* a snipet from Gridify (simplified)
* simplified version of
* http://dabblet.com/gist/3713619/
*/
html {
overflow: hidden;
min-height: 100%;
background: linear-gradient(dimgrey, black);
font: italic 90%/1.3 Georgia, serif;
text-align: center;
}
input[type=radio] { display: none; }
.c {
display: block;
position: absolute;
width: 5em;
height: 3em;
border: solid 2px whitesmoke;
border-radius: .5em;
box-shadow: 2px 2px 3px black;
margin: -1.5em -2.5em;
background-image:
url(http://i.space.com/images/i/17199/i02/carina-nebula-hubble-1600.jpg),
url(http://i.space.com/images/i/15762/i02/star-forming-region-1600.jpg),
url(http://i.space.com/images/i/17737/i02/star-gas-outflow-1600.jpg),
url(http://i.space.com/images/i/19144/i02/helix-nebula-1600.jpg),
url(http://i.space.com/images/i/19085/i02/dark-matter-galaxy-1600.jpg),
url(http://i.space.com/images/i/19352/i02/stellar-cluster-ngc-2467-1600.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
transition: 1s;
cursor: pointer;
}
.c:nth-of-type(-n+3) { bottom: 33.33%; }
.c:nth-of-type(n+4) { top: 33.33%; }
.c:nth-of-type(3n+1) { right: 25%; }
.c:nth-of-type(3n+2) { left: 50%; }
.c:nth-of-type(3n) { left: 25%; }
.c:first-of-type {
/* this is what I wanted to make a note of */
background-size: 0 0, 0 0, 0 0, 0 0, 0 0, cover;
}
.c:nth-of-type(2) {
background-size: 0 0, 0 0, 0 0, 0 0, cover, 0 0;
}
.c:nth-of-type(3) {
background-size: 0 0, 0 0, 0 0, cover, 0 0, 0 0;
}
.c:nth-of-type(4) {
background-size: 0 0, 0 0, cover, 0 0, 0 0, 0 0;
}
.c:nth-of-type(5) {
background-size: 0 0, cover, 0 0, 0 0, 0 0, 0 0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<input type='radio' name='item' id='cell-1' class='i'>
<input type='radio' name='item' id='cell-2' class='i'>
<input type='radio' name='item' id='cell-3' class='i'>
<input type='radio' name='item' id='cell-4' class='i'>
<input type='radio' name='item' id='cell-5' class='i'>
<input type='radio' name='item' id='cell-6' class='i'>
<input type='radio' name='item' id='degridify' class='degridify-i' checked>
<label for='cell-1' class='c' data-t='NGC 2467 and Surroundings'></label>
<label for='cell-2' class='c' data-t='Hubble Finds Dark Matter Ring In Galaxy Cluster'></label>
<label for='cell-3' class='c' data-t='The Helix Nebula'></label>
<label for='cell-4' class='c' data-t='A Shocking Outflow'></label>
<label for='cell-5' class='c' data-t='Hubble Views Grand Star Forming Region'></label>
<label for='cell-6' class='c' data-t='Evaporating Blobs Of The Carina Nebula'></label>
<label for='degridify' class='degridify'>de-gridify!</label>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment