stevenh512 · May 18, 2012 22:16 · May 19, 2012 · May 18, 2012 · May 18, 2012 · May 18, 2012
diff --git a/apple-shadow.html b/apple-shadow.html
@@ -1,4 +1,15 @@
-<div class="shadow-stuff">
- <div class="container">
- </div>
-</div>
+<html>
+  <head>
+    <title>Bending shadows backwards</title>
+    <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
+  </head>
+  <body>
+    <div class="shadow-stuff">
+      <div class="inner">
+        <div class="content">
+          Ohai!
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/sass/_apple-shadow.scss b/sass/_apple-shadow.scss
@@ -1,18 +1,16 @@
 @import "compass/css3";
 
-@mixin apple-shadow {
+@mixin apple-shadow ($background-color: #f6f6f6,
+                     $gradient-start-color: rgba(249, 249, 249, 1),
+                     $gradient-stop-color: rgba(240, 240, 240, 1)) {
   @include border-radius(0% 0% 100% 100% / 0% 0% 8px 8px);
   @include box-shadow(rgba(0, 0, 0, 0.3) 0 2px 3px);
-}
-
-@mixin apple-shadow-content {
-  margin: 40 0 0 0;
-  background-color: white;
-  height: 200px;
-  border: 1px solid #FFF;
-  background: #f6f6f6;
-  @include background(
-           linear-gradient(top, rgba(249, 249, 249, 1) 50%, rgba(240, 240, 240, 1) 100%));
-  @include border-radius(5px);
-  @include box-shadow(inset 0 2px 1px rgba(255, 255, 255, 0.97));
+  .inner {
+    border: 1px solid #FFF;
+    background: $background-color;
+    @include background(
+             linear-gradient(top, $gradient-start-color 50%, $gradient-stop-color 100%));
+    @include border-radius(5px);
+    @include box-shadow(inset 0 2px 1px rgba(255, 255, 255, 0.97));
+  }
 }
diff --git a/sass/screen.scss b/sass/screen.scss
@@ -1,9 +1,18 @@
 @import "apple-shadow";
 
 .shadow-stuff {
+  margin: auto;
+  width: 50%;
   @include apple-shadow;
+  .inner {
+    margin: 40px 0 0 0;
+  }
 }
 
-.container {
-  @include apple-shadow-content;
+.content {
+  margin-top: 50px;
+  margin-bottom: 50px;
+  text-align: center;
+  font-size: 150%;
+  font-weight: bold;
 }
diff --git a/config.rb b/config.rb
@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
diff --git a/sass/_apple-shadow.scss b/sass/_apple-shadow.scss
@@ -0,0 +1,18 @@
+@import "compass/css3";
+
+@mixin apple-shadow {
+  @include border-radius(0% 0% 100% 100% / 0% 0% 8px 8px);
+  @include box-shadow(rgba(0, 0, 0, 0.3) 0 2px 3px);
+}
+
+@mixin apple-shadow-content {
+  margin: 40 0 0 0;
+  background-color: white;
+  height: 200px;
+  border: 1px solid #FFF;
+  background: #f6f6f6;
+  @include background(
+           linear-gradient(top, rgba(249, 249, 249, 1) 50%, rgba(240, 240, 240, 1) 100%));
+  @include border-radius(5px);
+  @include box-shadow(inset 0 2px 1px rgba(255, 255, 255, 0.97));
+}
diff --git a/sass/screen.scss b/sass/screen.scss
@@ -0,0 +1,9 @@
+@import "apple-shadow";
+
+.shadow-stuff {
+  @include apple-shadow;
+}
+
+.container {
+  @include apple-shadow-content;
+}
diff --git a/apple-shadow.css b/apple-shadow.css
@@ -5,7 +5,6 @@
   -moz-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
   -webkit-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
   box-shadow: rgba(0,0,0,.30) 0 2px 3px;
-
 }
 
 .container {

diff --git a/apple-shadow.html b/apple-shadow.html
@@ -0,0 +1,4 @@
+<div class="shadow-stuff">
+ <div class="container">
+ </div>
+</div>
diff --git a/gistfile1.txt → apple-shadow.css b/gistfile1.txt → apple-shadow.css
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,29 @@
+.shadow-stuff {
+  -moz-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
+  -webkit-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
+  border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
+  -moz-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
+  -webkit-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
+  box-shadow: rgba(0,0,0,.30) 0 2px 3px;
+
+}
+
+.container {
+  margin: 40 0 0 0;
+  background-color: white;
+  height: 200px;
+  border: 1px solid #FFF;
+  background: #F6F6F6;
+  background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(249, 249, 249, 1)),color- stop(100%,rgba(240, 240, 240, 1)));
+  background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
+  background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
+  background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
+  background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
+  background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 2px 1px rgba(255,255,255,.97);
+  -moz-box-shadow: inset 0 2px 1px rgba(255,255,255,.97);
+  box-shadow: inset 0 2px 1px rgba(255,255,255,.97);
+}