Skip to content

Instantly share code, notes, and snippets.

@jklm313

jklm313/dabblet.css

Created July 25, 2012 17:28
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save jklm313/3177403 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
* {margin: 0; padding: 0; box-sizing: border-box; position: relative}
html, body {
width: 100%;
height: 100%;
}
body {
background: #999;
font-size: 100%;
font-family: sans-serif;
color: #222;
padding-top: 3.125em;
}
#stack {
width: 21.875em;
height: 31.250em;
box-shadow: 0 0 15px rgba(0,0,0,.3);
border-radius: 10px;
margin: 0 auto;
border-left: 80px solid transparent;
transition: .3s;
z-index: 999;
}
[name=btn] {
display: none
}
.buttons {
float: left;
background: #222;
box-shadow: inset 0 0 35px rgba(0,0,0,.7);
width: 5em;
height: 100%;
margin-left: -5em;
}
.btn {
display: block;
height: 20%;
border-bottom: 1px solid rgba(0,0,0,.7);
cursor: pointer;
transition: .1s;
text-align:center;
font-size: 5em;
color: #111;
text-shadow: 1px 0 rgba(255,255,255,.3), -1px -1px rgba(0,0,0,.9);
}
.btn:last-child {
border-bottom: 0;
}
.btn + .btn {
border-top: 1px solid rgba(255,255,255,.2);
}
.btn:hover {
box-shadow: 0 0 15px rgba(255,170,0,.7);
}
.btn:active {
box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 1.563em skyblue
}
.btn:first-child, .buttons {
border-top-left-radius: 10px;
}
.btn:last-child, .buttons {
border-bottom-left-radius: 10px;
}
.cards {
height: 100%;
width: 100%;
background: linear-gradient(180deg,white,#d9d9d9);
border-right: 1px solid #fff;
}
.crd {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
padding: 2.188em 0.938em 0.938em;
transition: .6s;
}
.crd, .cards {
border-radius: 0 0.625em 0.625em 0;
}
.crd p {
font: .9em/1.4em sans-serif;
margin-top: 0.625em;
}
.crd-whereabouts {
box-shadow: inset 0 0 200px 15px white;
background: url('https://dl.dropbox.com/u/32750720/map.png') no-repeat 0 0;
text-shadow: 0 0 5px white;
}
.link-gmap {
display: block;
height: 240px;
line-height: 240px;
text-align: center;
text-decoration: none;
color: #222;
}
.address {
width: 200px;
margin: 0 auto;
}
h4 {
display: block;
padding-bottom: 0.313em;
border-bottom: 1px solid rgba(0,0,0,.2);
text-shadow: none
}
.map {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
z-index: 1;
}
.map iframe {
width: 100%;
height: 100%;
transition: -webkit-filter .5s;
}
#profile:checked ~ #stack .cards .crd-profile,
#portfolio:checked ~ #stack .cards .crd-portfolio,
#manifesto:checked ~ #stack .cards .crd-manifesto,
#call:checked ~ #stack .cards .crd-call,
#whereabouts:checked ~ #stack .cards .crd-whereabouts {
opacity: 1;
}
#whereabouts:checked ~ #stack .cards {
background: none;
border-right: 0;
}
#whereabouts:checked ~ #stack {
width: 31.250em;
transition: .6s;
}
#profile:checked ~ #stack .buttons .btn-profile,
#portfolio:checked ~ #stack .buttons .btn-portfolio,
#manifesto:checked ~ #stack .buttons .btn-manifesto,
#call:checked ~ #stack .buttons .btn-call,
#whereabouts:checked ~ #stack .buttons .btn-whereabouts {
box-shadow: inset 0 0 3.438em black;
color: rgba(250,0,20,.6);
text-shadow: none;
}
#profile:checked ~ .map iframe,
#portfolio:checked ~ .map iframe,
#manifesto:checked ~ .map iframe,
#call:checked ~ .map iframe {
transition: -webkit-filter 4s;
}
#profile:checked ~ .map iframe {
-webkit-filter: blur(10px) hue-rotate(250deg);
}
#portfolio:checked ~ .map iframe {
-webkit-filter: blur(10px) hue-rotate(80deg);
}
#manifesto:checked ~ .map iframe {
-webkit-filter: blur(10px) hue-rotate(50deg);
}
#call:checked ~ .map iframe {
-webkit-filter: blur(10px) hue-rotate(10deg);
}
#whereabouts:checked ~ .map iframe {
-webkit-filter: none;
}
Raw
dabblet.html
<input checked type="radio" name="btn" id="profile" />
<input type="radio" name="btn" id="portfolio" />
<input type="radio" name="btn" id="manifesto" />
<input type="radio" name="btn" id="call" />
<input type="radio" name="btn" id="whereabouts" />
<div id="stack">
<div class="buttons">
<label for="profile" class="btn btn-profile">
&spades;
</label>
<label for="portfolio" class="btn btn-portfolio">
&diams;
</label>
<label for="manifesto" class="btn btn-manifesto">
&clubs;
</label>
<label for="call" class="btn btn-call">
&hearts;
</label>
<label for="whereabouts" class="btn btn-whereabouts">
♞
</label>
</div>
<div class="cards">
<div class="crd crd-profile">
<h4>Merlin McMerlinson</h4>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
<div class="crd crd-portfolio">
<h4>Works</h4>
</div>
<div class="crd crd-manifesto">
<h4>Manifesto</h4>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
<div class="crd crd-call">
<h4>Get in touch</h4>
</div>
<div class="crd crd-whereabouts">
<h4>Whereabouts:</h4>
<b><a href="http://goo.gl/maps/uAWfW" class="link-gmap">Go to Google maps</a></b>
<p class="address">
<b>Stonehenge</b>,<br/>
Abbey Square, Amesbury,
Salisbury SP4 7ES, <br/>
United Kingdom<br/>
XXX-XXX-XXX
</p>
</div>
</div>
</div>
<!--div class="map">
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&amp;ll=51.178711,-1.826015&amp;spn=0.000488,0.001313&amp;t=h&amp;z=20&amp;layer=c&amp;cbll=51.178711,-1.826015&amp;panoid=2RimyJCPSxvFiDcE_oltNQ&amp;cbp=12,358.35,,0,-3.68&amp;source=embed&amp;output=svembed"></iframe>
</div>
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