Skip to content

Instantly share code, notes, and snippets.

@cedricici

cedricici/dabblet.css

Created March 28, 2012 09:22
Show Gist options
  • Save cedricici/2225001 to your computer and use it in GitHub Desktop.
Save cedricici/2225001 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
**
* multipages
*/
*{margin:0;padding:0;}
body{
overflow:hidden;
font:.5cm sans-serif;
perspective:500px;
}
section {
position:absolute;
top:0;
height:0;
width:100%;
height:100%;
overflow-y:scroll;
z-index:0;
background:coral;
border:10% solid red;
box-shadow: 4px 4px 10px rgba(0,0,0,0.2) inset;
transition: margin 1s ease , z-index 0s ease 9999s, transform 1s ease;
}
section h1{
text-align:center;
}
section:nth-child(1) {
background:crimson;
}
section:nth-child(2) {
background:khaki;
}
section:nth-child(3) {
background:goldenrod;
}
section:hover:not(:first-child){
margin-top:20px;
}
section:hover ~ section{
margin-top:100px;
transform:rotateX(-4deg);
}
section:hover ~ section ~ section{
margin-top:200px;
transform:rotateX(-4deg);
}
section:active ~ section,section ~ section:active {
z-index:0;
}
section:active {
z-index:100;
transition: margin 1s ease , z-index 0s ease ;
}
section:active:not(:first-child) {
margin-top:20px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section><h1>Section 1</h1></section>
<section><h1>Section 2</h1></section>
<section><h1>Section 3</h1></section>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment