Merge pull request MoOx#41 from canarymason/sfx

2 new effects (scatter & corner tucked/taped)
michaek · Feb 20, 2012 · f6f992b · f6f992b
2 parents ffc2baf + b77457f
commit f6f992b
Show file tree

Hide file tree

Showing 9 changed files with 398 additions and 1 deletion.
diff --git a/stylesheets/recipes/effect/_corners-tucked.scss b/stylesheets/recipes/effect/_corners-tucked.scss
@@ -0,0 +1,48 @@
+/**
+ * CSS3 Tucked Corners effect
+ *
+ * @thanks Chris Coyier @chriscoyier
+ * @link http://css-tricks.com/snippets/css/tucked-corners/
+ * @author Mason Wendell http://thecodingdesigner.com
+ *
+ */
+
+// $tape-color: the background css property
+// $inner-element: the selector for the inner element (for bottom corners)
+@mixin corners-tucked($tape-color: white, $height: 50px, $width: 100px, $inner-element: "span.bottom-corners") {
+    position: relative;
+    @include box-sizing(border-box);
+    &:after, &:before, #{$inner-element}:after, #{$inner-element}:before {
+        position: absolute;
+        content: "";
+        z-index: 10;
+        background: $tape-color;
+        height: $height;
+        width: $width;
+        @include box-shadow(rgba(black, 0.5) 0 6px 9px -8px); }
+    &:after {
+        top: -($height * 0.5);
+        left: -($width * 0.5);
+        @include rotate(-45deg); }
+    &:before {
+        top: -($height * 0.5);
+        right: -($width * 0.5);
+        @include rotate(45deg); }
+    #{$inner-element} {
+        display: block;
+        position: relative;
+        width: 100%;
+        @include box-sizing(border-box);
+        &:after {
+            bottom: -($height * 0.5);
+            left: -($width * 0.5);
+            @include rotate(-135deg); }
+        &:before {
+            bottom: -($height * 0.5);
+            right: -($width * 0.5);
+            @include rotate(135deg); } } }
+
+
+@mixin corners-taped($tape-color: rgba(white, 0.5), $height: 50px, $width: 100px, $inner-element: "span.bottom-corners") {
+    @include corners-tucked($tape-color, $height, $width, $inner-element);
+}
diff --git a/stylesheets/recipes/effect/_scatter.scss b/stylesheets/recipes/effect/_scatter.scss
@@ -0,0 +1,22 @@
+/**
+ * Rotate a group of elements as if they were casually tossed on a table
+ *
+ * @author Mason Wendell http://thecodingdesigner.com
+ *
+ */
+
+@mixin scatter($rotate: 10deg, $variation: 6) {
+    $rotate-a: $rotate - $variation;
+    $rotate-b: $rotate + $variation;
+    $rotate-c: $rotate + ($variation / 2);
+    @include rotate($rotate);
+    &:nth-of-type(2n+2) {
+        @include rotate($rotate-a);
+    }
+    &:nth-of-type(3n+3) {
+        @include rotate($rotate-b);
+    }
+    &:nth-of-type(5n+5) {
+        @include rotate($rotate-c);
+    }
+}
diff --git a/tests/recipes/effect/corners-tucked/index.html b/tests/recipes/effect/corners-tucked/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<link rel="stylesheet" href="s.css" />
+<h1>Tests for <a href="../../">recipes</a>/<a href="../">effect</a>/corners-tucked &mdash; corners-taped</h1>
+
+<p class="doc">
+    Simulate tucking corners into slits or celophane tape on corners
+</p>
+
+<div class="body">
+    <div class="tucked-corners">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+
+    <div class="taped-corners">
+      <span class="bottom-corners"> <!-- Span used for bottom corners -->
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+      </span>
+    </div>
+</div>
diff --git a/tests/recipes/effect/corners-tucked/s.css b/tests/recipes/effect/corners-tucked/s.css
@@ -0,0 +1,183 @@
+html {
+  padding: 1em;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
+  background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: linear-gradient(#dddddd, #ffffff) no-repeat;
+}
+
+h1 {
+  font-size: 2em;
+  margin-bottom: 1em;
+}
+
+h2 {
+  font-size: 1.4em;
+  margin-bottom: .6em;
+}
+
+.doc {
+  background: #fff;
+  border: #ddd;
+  padding: 1em;
+  color: #aaa;
+  margin: 1em;
+  font-style: italic;
+}
+.doc a {
+  color: #999;
+}
+
+/**
+ * CSS3 Tucked Corners effect
+ *
+ * @thanks Chris Coyier @chriscoyier
+ * @link http://css-tricks.com/snippets/css/tucked-corners/
+ * @author Mason Wendell http://thecodingdesigner.com
+ *
+ */
+html {
+  background: #eeeeee;
+}
+
+.tucked-corners, .taped-corners {
+  width: 300px;
+  margin: 4em auto 8em;
+  background-color: #BADA55;
+}
+.tucked-corners .bottom-corners, .taped-corners .bottom-corners {
+  padding: 0.5em 1em;
+}
+
+.tucked-corners {
+  position: relative;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0.5em 1em;
+}
+.tucked-corners:after, .tucked-corners:before, .tucked-corners span.bottom-corners:after, .tucked-corners span.bottom-corners:before {
+  position: absolute;
+  content: "";
+  z-index: 10;
+  background: #eeeeee;
+  height: 50px;
+  width: 100px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+  -o-box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+}
+.tucked-corners:after {
+  top: -25px;
+  left: -50px;
+  -moz-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.tucked-corners:before {
+  top: -25px;
+  right: -50px;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.tucked-corners span.bottom-corners {
+  display: block;
+  position: relative;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.tucked-corners span.bottom-corners:after {
+  bottom: -25px;
+  left: -50px;
+  -moz-transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  -ms-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+.tucked-corners span.bottom-corners:before {
+  bottom: -25px;
+  right: -50px;
+  -moz-transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+.taped-corners {
+  position: relative;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.taped-corners:after, .taped-corners:before, .taped-corners span.bottom-corners:after, .taped-corners span.bottom-corners:before {
+  position: absolute;
+  content: "";
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.5);
+  height: 50px;
+  width: 100px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+  -o-box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 6px 9px -8px;
+}
+.taped-corners:after {
+  top: -25px;
+  left: -50px;
+  -moz-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.taped-corners:before {
+  top: -25px;
+  right: -50px;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.taped-corners span.bottom-corners {
+  display: block;
+  position: relative;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.taped-corners span.bottom-corners:after {
+  bottom: -25px;
+  left: -50px;
+  -moz-transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  -ms-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+.taped-corners span.bottom-corners:before {
+  bottom: -25px;
+  right: -50px;
+  -moz-transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
diff --git a/tests/recipes/effect/corners-tucked/s.scss b/tests/recipes/effect/corners-tucked/s.scss
@@ -0,0 +1,24 @@
+@import "tests";
+@import "recipes/effect/corners-tucked";
+
+html {
+  background: #eeeeee;
+}
+
+.tucked-corners, .taped-corners{
+  width: 300px;
+  margin: 4em auto 8em;
+  background-color: #BADA55;
+  .bottom-corners {
+    padding: 0.5em 1em;
+  }
+}
+
+.tucked-corners{
+    @include corners-tucked(#eeeeee);
+    padding: 0.5em 1em;
+}
+
+.taped-corners{
+    @include corners-taped;
+}
diff --git a/tests/recipes/effect/index.html b/tests/recipes/effect/index.html
@@ -6,5 +6,6 @@ <h1>Tests for <a href="../">recipes</a>/effect</h1>
     <li><a href="glass">glass</a></li>
     <li><a href="bevel">bevel</a></li>
     <li><a href="cutout">cutout</a></li>
-
+    <li><a href="scatter">scatter</a></li>
+    <li><a href="corners-tucked">corners-tucked &mdash; corners-taped</a></li>
 </ul>
diff --git a/tests/recipes/effect/scatter/index.html b/tests/recipes/effect/scatter/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<link rel="stylesheet" href="s.css" />
+<h1>Tests for <a href="../../">recipes</a>/<a href="../">effect</a>/scatter</h1>
+
+<p class="doc">
+    Rotate a group of elements as if they were casually tossed on a table
+</p>
+
+<div class="body">
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+    <div class="scatter"></div>
+</div>