Skip to content

Instantly share code, notes, and snippets.

@ltackett
Created April 14, 2010 22:06
Show Gist options
  • Select an option

  • Save ltackett/366401 to your computer and use it in GitHub Desktop.

Select an option

Save ltackett/366401 to your computer and use it in GitHub Desktop.
3d-looking thing I did in StaticMatic one day for Lunch... http://img.skitch.com/20100414-xusunswcpispbk94mheg6kfnr9.png
!!!
%html
%head
%title StaticMatic
-# Call stylesheets
= stylesheets
-# Call AJAX libraries
= javascripts 'http://www.google.com/jsapi', :modernizr
:javascript
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
%body
#wrap
= yield
@import compass.sass
html, body
height: 100%
body
font:
family: Verdana
size: 10pt
+linear-gradient(color_stops(#666, black))
#wrap
width: 600px
margin: 0 auto
margin-top: 100px
.unit
+float-left
width: 250px
margin: 20px
margin-right: -240px
.mirror-me
+linear-gradient(color_stops(#FFF, rgb(240,240,240)))
+box-shadow(0, 7px, 30px, rgba(0,0,0,0.7))
+border-radius(15px)
padding: 20px
height: 170px
.cssreflections &
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, rgba(255,255,255,0)), to(rgba(255,255,255,0.5)))
.mirrord
+apply-transform(skew(0, -15deg))
+linear-gradient(color_stops(rgba(240,240,240,0.3), rgba(240,240,240,0)))
+border-top-radius(15px)
margin-top: 5px
height: 50px
.cssreflections &
display: none
&:nth-child(1)
.mirror-me, .mirrord
+apply-transform(skew(0, -15deg))
&:nth-child(2)
.mirror-me, .mirrord
+apply-transform(skew(0, -10deg))
.mirror-me
margin-top: 10px
&:nth-child(3)
.mirror-me, .mirrord
+apply-transform(skew(0, -5deg))
.mirror-me
margin-top: 20px
.unit
.mirror-me
%h1 blah
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.mirrord  
.unit
.mirror-me
%h1 blah
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.mirrord  
.unit
.mirror-me
%h1 blah
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.mirrord  
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment