Skip to content

Instantly share code, notes, and snippets.

@ninadingole

ninadingole/dabblet.css

Created July 10, 2012 16:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ninadingole/3084658 to your computer and use it in GitHub Desktop.
Save ninadingole/3084658 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body{
margin:3em;
}
.box{
width:880px;
height:330px;
border-radius:.5em;
}
.slider{
width:520px;
overflow:hidden;
display:inline-block;
transform:skewX(-20deg);
margin-left:-76px;
border-right:10px solid ghostwhite;
pointer-events:none;
transition:width 1.2s ease-in-out;
}
.box a{
display:block;
width:100%;
height:100%;
}
.sunrise{
background: url(https://dl.dropbox.com/u/444684/splitfeature/sunrise.jpg) no-repeat;
position:absolute;
box-shadow:0 0 10px rgba(0,0,0,.7);
}
.sunset{
margin-left:76px;
pointer-events:auto;
transform:skewX(20deg);
background: url(https://dl.dropbox.com/u/444684/splitfeature/sunset-elephant.jpg) no-repeat;
}
.slider:hover{
width:760px;
}
.sunrise:hover + .slider{
width:250px;
}
Raw
dabblet.html
<body>
<div class="box sunrise">
<a href="#box1"></a>
</div>
<div class="slider">
<div class="box sunset">
<a href="#box2"></a>
</div>
</div>
</body>
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