Skip to content

Instantly share code, notes, and snippets.

@CameronGilroy

CameronGilroy/dabblet.css

Created March 13, 2012 08:32
Show Gist options
  • Save CameronGilroy/2027602 to your computer and use it in GitHub Desktop.
Save CameronGilroy/2027602 to your computer and use it in GitHub Desktop.
Download ZIP
design shack - Use Pseudo Elements to Create an Image Stack Illusion
Raw
dabblet.css
/**
* design shack - Use Pseudo Elements to Create an Image Stack Illusion
*/
* { margin: 0; padding: 0; }
body {background: #ccd3d7;}
div[class*='stack'] {
float: left;
position: relative;
margin: 50px;
}
div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after {
border: 6px solid #fff;
height: 200px; width: 200px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
div[class*='stack']:before, div[class*='stack']:after {
background: #768590;
content: "";
position: absolute;
z-index: -1;
/*Dirty IE8 hack*/
height: 0px\9; width: 0px\9;
border: none\9;
}
div[class*='stack']:before {
background: #eff4de;
}
/*STACK ONE*/
.stackone:before {
top: 4px;
left: -6px;
}
.stackone:after {
top: -2px;
left: -6px;
}
/*STACK TWO*/
.stacktwo:before {
top: 0px;
left: -10px;
transform: rotate(-5deg);
}
.stacktwo:after {
top: 5px; left: 0px;
transform: rotate(4deg);
}
/*STACK THREE*/
.stackthree:before {
top: 5px;
left: -15px;
z-index: -1;
transform: rotate(-10deg);
}
.stackthree:after {
top: -2px;
left: -10px;
transform: rotate(-5deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='stackone'>
<img src="http://lorempixum.com/200/200/city/7" />
</div>
<div class='stacktwo'>
<img src="http://lorempixum.com/200/200/city/7" />
</div>
<div class='stackthree'>
<img src="http://lorempixum.com/200/200/city/7" />
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment