Skip to content

Instantly share code, notes, and snippets.

@dstorey
Created July 3, 2012 06:53
Show Gist options
  • Save dstorey/3038149 to your computer and use it in GitHub Desktop.
Save dstorey/3038149 to your computer and use it in GitHub Desktop.
set the size of the boxes and any decoration
.slider {
/* set initial width */
width: 520px;
/* hide the content that overflows (to allow second box to show through) */
overflow: hidden;
display: inline-block;
/* skew container so that it has angled edge, and set up transition */
transform: skewX(-20deg);
transition: width 1.2s ease-in-out;
/* give negative margin to remove gap caused by left hand skew */
margin-left: -76px;
border-right: 10px solid ghostwhite;
/* hide pointer events for unseen content */
pointer-events: none;
}
/* set the size of the boxes and any decoration */
.box {
width: 880px;
height: 330px;
border-radius: .5em;
}
/* make the links the size of the full boxes (not needed for technique) */
.box a {
display: block;
width: 100%;
height: 100%;
}
.sunset {
/* skew back by negative of parent’s skew so contents is upright */
transform: skewX(20deg);
background: url(https://dl.dropbox.com/u/444684/splitfeature/sunset-elephant.jpg) no-repeat;
margin-left: 76px; /* give margin to push content away from left slanted edge */
pointer-events: auto; /* allow pointer events for the box */
}
.sunrise {
background: url(https://dl.dropbox.com/u/444684/splitfeature/sunrise.jpg) no-repeat;
position: absolute; /* remove from flow so sunset is placed on top */
box-shadow: 0 0 10px rgba(0, 0, 0, .7);
}
/* make first box bigger on hover, and smaller when hover second box */
.slider:hover {
width: 760px;
}
.sunrise:hover + .slider {
width: 250px;
}
/* decoration for body, header and footer */
body {
/* style body. can ignore */
font-family: helvetica, sans-serif;
margin: 3em;
background: url(https://dl.dropbox.com/u/444684/splitfeature/noiselight.png), radial-gradient(50% -80%, #d1d1d1, #d9d9d9);
}
h1 {
color: #2F2F2F;
font-size: 26px;
text-shadow: 0 0 2px white;
margin-bottom: 1.5em;
}
footer {
position: absolute;
bottom: 1px;
color: dimgrey;
text-shadow: 0 0 1px white;
font-size: 12px;
}
footer a {
color: darkorange;
text-decoration: none;
}
<h1>Split view feature box with CSS skew transform and transitions</h1>
<div class="box sunrise"><a href="#box2"></a></div>
<div class="slider">
<div class="box sunset"><a href="#box1"></a></div>
</div>
<footer>
<p>Handcrafted by <a href="http://www.twitter.com/dstorey">@dstorey</a> for
<a href="http://www.generatedcontent.org/123456/split-feature">GeneratedContent.org</a>. Sunset image, <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">Some rights reserved</a> by <a href="http://www.flickr.com/photos/42429527@N03/">najeebkhan2009</a>. Sunrise image, <a href="http://creativecommons.org/licenses/by-nd/2.0/">Some rights reserved</a> by <a href="http://www.flickr.com/photos/petehogan/">3dpete</a>.</p>
</footer>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@LeaVerou
Copy link

LeaVerou commented Jul 5, 2012

Nice!

@macdet
Copy link

macdet commented Mar 12, 2013

VERY clever!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment