Skip to content

Instantly share code, notes, and snippets.

@ericlva

ericlva/index.html

Created September 28, 2013 13:02
Show Gist options
  • Save ericlva/6741875 to your computer and use it in GitHub Desktop.
Save ericlva/6741875 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Chris Coyier.
Raw
index.html
<div id="burst"></div>
<div id="heart"></div>
<div id="infinity"></div>
Raw
shadowTowers.markdown
Raw
style.scss
@import "compass";
@mixin shadowTower($shadowColor) {
@include filter(
drop-shadow(1px 1px 0 rgba($shadowColor, 0.9))
drop-shadow(2px 2px 0 rgba($shadowColor, 0.8))
drop-shadow(3px 3px 0 rgba($shadowColor, 0.7))
drop-shadow(4px 4px 0 rgba($shadowColor, 0.6))
drop-shadow(5px 5px 0 rgba($shadowColor, 0.5))
drop-shadow(6px 6px 0 rgba($shadowColor, 0.4))
drop-shadow(7px 7px 0 rgba($shadowColor, 0.3))
drop-shadow(8px 8px 0 rgba($shadowColor, 0.2))
drop-shadow(9px 9px 0 rgba($shadowColor, 0.1))
);
}
#burst {
background: #ffb346;
width: 80px;
height: 80px;
margin-right: 30px;
display: inline-block;
position: relative;
@include shadowTower(#bd7d00);
&:before, &:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #ffb346;
}
&:before {
@include transform(rotate(30deg));
}
&:after {
@include transform(rotate(60deg));
}
}
body {
padding: 60px;
}
#heart {
display: inline-block;
position: relative;
width: 100px;
height: 90px;
margin-right: 40px;
@include shadowTower(#ff8870);
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
@include transform(rotate(-45deg));
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
@include transform(rotate(45deg));
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
#infinity {
position: relative;
width: 212px;
height: 100px;
display: inline-block;
@include shadowTower(#666);
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid black;
border-radius: 50px 50px 0 50px;
@include transform(rotate(-45deg));
}
#infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
@include transform(rotate(45deg));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment