3d-ribbon 0.1.1

data/README.markdown

@@ -0,0 +1,230 @@
+#3D CSS Ribbons
+
+A extension (for [Compass](http://compass-style.org/)) to create 3D ribbons using only CSS. 
+**[Live example](http://jsfiddle.net/dzignus/LXJ7X/)**.
+
+![some nice example](http://static.tumblr.com/djfsbl4/N1qllypq4/ribbon_example.png) 
+
+The extension is inspired in [3D Ribbon Generator](http://www.css3d.net/ribbon-generator/).
+
+
+
+
+#Installation
+
+From the command line:
+
+    sudo gem install 3d-ribbon
+
+Installing into an existing project:
+
+    # edit the project configuration file and add:
+    require '3d-ribbon'
+
+	#from the command line
+    compass install 3d-ribbon
+
+	#import the extension into your scss/sass file
+	@import "3d-ribbon"
+
+Or create a new project:
+
+    compass create <project_name> -r 3d-ribbon --using 3d-ribbon 
+
+	#import the extension into your scss/sass file
+	@import "3d-ribbon"
+
+
+
+
+#Intro
+
+The extension offer a simple and flexible way to create 3D ribbons with CSS.
+
+Browser support:
+
+* IE7+
+* Firefox 3.5+
+* Google Chrome
+* Safari / Safari iOS
+
+Note: In IE7/8, box-shadows and border-radius only using [CSS3 Pie](http://compass-style.org/reference/compass/css3/pie/).
+
+## First, in your HTML document:
+
+This is the basic structure to create a ribbon with two sides (left / right):
+
+	<div id="ribbon-example-foo">
+
+		<!--start ribbon-->
+		<div class="ribbon-wrapper">
+			<div class="ribbon-front">
+			
+				Here you can put some content (like "Lorem ipsum dolor sit amet...") or HTML elements
+				
+			</div>
+			<div class="ribbon-edge-left-top"></div>
+			<div class="ribbon-edge-right-top"></div>
+			<div class="ribbon-edge-left-bottom"></div>
+			<div class="ribbon-edge-right-bottom"></div>
+			<div class="ribbon-back-left"></div>
+			<div class="ribbon-back-right"></div>
+		</div>
+		<!--end ribbon -->
+
+	</div>
+
+
+If you need only one side in the ribbon, you can remove some `<div />`. For example, if you need a ribbon with only the right side, you can remove `<div class="ribbon-edge-left-top"></div>`, `<div class="ribbon-edge-left-bottom"></div>` and `<div class="ribbon-back-left"></div>`.
+
+
+## Then, in your Sass document:
+
+**The simple way**:
+
+    #ribbon-example-foo{
+      @include ribbon($front-width: 400px);
+    }
+
+**The flexible way (with all options)**:
+
+    #ribbon-example-foo{
+      @include ribbon(
+              $front-width: 750px,
+              $sides: left-bottom,
+              $ribbon-height: 40px,
+              $front-color: #80B5AD, 
+              $edges-color: darken(#8ABD9A, 30%), 
+              $back-color: #8DBF96,
+              $back-width: 30px, 
+              $overlap-width: 35px, 
+              $overlap-height: 15px,
+              $border-radius: 7px,
+              $include-pie: true);
+    }
+
+
+
+#Settings:
+
+## $front-width: 
+
+The width of the ribbon content, in px. This is the only mandatory argument.
+
+
+## $sides:
+
+The sides of the ribbon (left / right) and position (top / bottom). Options availables:
+
+* `left-top`
+* `left-bottom`
+* `right-top`
+* `right-bottom`
+
+For example, is you want a ribbon with only one side (right) and orientation top:
+
+      @include ribbon($front-width: 450px, $sides: right-top);
+
+
+Default value: `left-bottom right-bottom`.
+
+
+## $ribbon-height:
+
+The height of the ribbon, in px. Default value: `40px`.
+
+
+## $front-color:
+
+The color of the front of the ribbon. Default value: `#3A89CE`.
+
+
+## $edges-color:
+
+The color of the edges of the ribbon. Default value: `darken($front-color, 30%)`.
+
+
+## $back-color:
+
+The color of the back part of the ribbon. Default value: `$front-color`.
+
+
+## $back-width:
+
+The width of the back part of the ribbon, in px. Default value: `40px`.
+
+
+## $overlap-width:
+
+The width of the overlap of the ribbon, in px. Default value: `30px`.
+
+
+## $overlap-height:
+
+The height of the overlap of the ribbon, in px. Default value: `20px`.
+
+
+## $border-radius:
+
+Border radius of the back part of the ribbon. Default value: `0`.
+
+
+## $include-pie:
+
+Support for CSS3 PIE (AKA: border-radius, box-shadow and others CSS3 styles for IE8/7/6). [More info](http://compass-style.org/reference/compass/css3/pie/). Remember set `$pie-behavior` with the path of the `PIE.htc` and deliver the file with the mime-type `Content-Type: text/x-component`.
+
+Default value: `false`.
+
+
+
+
+#Examples
+
+The examples in action can be found in `templates/project/3d-ribbon-examples.html`.
+    
+    #ribbon-example-1{
+      @include ribbon($front-width: 400px);
+    }
+    
+    #ribbon-example-2{
+      @include ribbon($front-width: 450px, $sides: left-top right-bottom); //Asimetric ribbon!
+    }
+    
+    #ribbon-example-3{
+      @include ribbon($front-width: 550px, $ribbon-height: 40px, $front-color: #8C46C3);
+    }
+    
+    #ribbon-example-4{
+      @include ribbon($front-width: 600px, $front-color: #8C46C3, $edges-color: darken(#9F4BBA, 10%), $back-color: #B952AE);
+    }
+    
+    #ribbon-example-5{
+      @include ribbon($front-width: 650px, $back-width: 20px, $overlap-width: 25px, $overlap-height: 10px);
+    }
+    
+    #ribbon-example-6{
+      @include ribbon($front-width: 650px, $back-width: 0);
+    }
+    
+    #ribbon-example-7{
+      @include ribbon($front-width: 700px, $border-radius: 5px);
+    }
+    
+    #ribbon-example-8{
+      @include ribbon(
+              $front-width: 750px,
+              $sides: left-bottom,
+              $ribbon-height: 40px,
+              $front-color: #80B5AD, 
+              $edges-color: darken(#8ABD9A, 30%), 
+              $back-color: #8DBF96,
+              $back-width: 30px, 
+              $overlap-width: 35px, 
+              $overlap-height: 15px,
+              $border-radius: 7px,
+              $include-pie: true);
+    }
+
+
+
+

data/lib/3d-ribbon.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('3d-ribbon', :path => extension_path)

data/stylesheets/_3d-ribbon.scss

@@ -0,0 +1,250 @@
+// 3D CSS Ribbon ------------------------------------------------------------
+// Plugin by Leandro D'onofrio - http://dzign.us/
+
+
+// Imports --------------------------------------------------------------------
+
+@import "compass/css3/images";
+@import "compass/css3/box-shadow";
+@import "compass/css3/border-radius";
+@import "compass/css3/pie";
+
+//** 3D CSS Ribbon **//
+
+//The real name was "3d-ribbon" but mixins can't start with a number...
+@mixin ribbon(
+
+  // Set the sides of the ribbon
+  $sides             : left-bottom right-bottom,
+  
+  // Set the color of the ribbon
+  $front-color       : #3A89CE,
+  
+  // Set the color of the edges
+  $edges-color       : darken($front-color, 30%),
+  
+  // Set the color of the back sides
+  $back-color        : $front-color,
+  
+  // Set the width of the front
+  $front-width       : 0,
+  
+  // Set the height of the ribbon
+  $ribbon-height     : 40px,
+  
+  // Set the width of the back sides
+  $back-width        : 40px,
+  
+  // Set the width of the overlaps
+  $overlap-width     : 30px,
+  
+  // Set the height of the overlaps
+  $overlap-height    : 20px,
+  
+  // Set the distance of the overlaps
+  $overlap-distance  : 0,
+  
+  // Set the border radius of the back sides
+  $border-radius     : 0,
+  
+  //Support for CSS3 PIE - More info: http://compass-style.org/reference/compass/css3/pie/
+  $include-pie       : false
+  
+  ) {
+  
+  //If include CSS3 PIE, don't repeat position: relative
+  $pie-default-approach : none;
+  
+  //ribbon-wrapper
+  div.ribbon-wrapper {
+    height: ($ribbon-height + $overlap-height);
+    width: $front-width;
+    position: relative;
+    z-index: 3;
+    
+    //Shadow only for bottom sides
+    @if ($overlap-distance == 0) and ($sides == (left-bottom right-bottom)) or ($sides == (right-bottom left-bottom)) {
+      
+      background-position: 0 $ribbon-height;
+      @include background-image(linear-gradient(#555 0px, rgba(255, 255, 255, 0) $overlap-height));
+      
+    }
+    
+  }
+  
+  //ribbon-front
+  div.ribbon-front {
+    width: ($front-width + ($overlap-width*length($sides)) + ($overlap-distance*length($sides)));
+    height: $ribbon-height;
+    background-color: $front-color;
+    position: relative;
+    z-index: 2;
+    @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px);
+    
+    @if ($sides == right-top) or ($sides == right-bottom) {
+      
+      left: 0;
+      
+    } @else {
+      
+      left: -($overlap-width + $overlap-distance);
+    
+    }
+    
+    @if $include-pie == true {
+    
+      @include pie;
+    
+    }
+    
+  }
+  
+  //for each side
+  @each $position in (left right) {
+    
+    //left side
+    @if ($position == left) and (($sides == left-top) or ($sides == left-bottom)) {
+    
+      div.ribbon-edge-left-top,
+      div.ribbon-edge-left-bottom {
+        @include _ribbon-edge(left, $overlap-width, $overlap-distance);
+      }
+      
+      div.ribbon-back-left {
+        @include _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, left, $overlap-distance, $include-pie);
+      }
+    
+    //right side
+    } @else if ($position == right) and (($sides == right-top) or ($sides == right-bottom)) {
+    
+      div.ribbon-edge-right-top,
+      div.ribbon-edge-right-bottom {
+        @include _ribbon-edge(right, $overlap-width, $overlap-distance);
+      }
+      
+       div.ribbon-back-right {
+        @include _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, right, $overlap-distance, $include-pie);
+      }
+    
+    //both sides
+    } @else if ($sides == (left-top right-top)) or ($sides == (left-bottom right-bottom)) or ($sides == (left-top right-bottom)) or ($sides == (left-bottom right-top)) or ($sides == (right-top left-top)) or ($sides == (right-bottom left-bottom)) or ($sides == (right-top left-bottom)) or ($sides == (right-bottom left-top)) {
+    
+      div.ribbon-edge-#{$position}-top,
+      div.ribbon-edge-#{$position}-bottom {
+        @include _ribbon-edge(#{$position}, $overlap-width, $overlap-distance);
+      }
+      
+      div.ribbon-back-#{$position} {
+        @include _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, #{$position}, $overlap-distance, $include-pie);
+      }
+      
+    }
+    
+  }
+  
+  //for each selected side
+  @each $side in $sides {
+    
+    //left-top side
+    @if $side ==  left-top {
+      
+      div.ribbon-edge-left-top {
+        bottom: ($ribbon-height + $overlap-height);
+        border-width: $overlap-height $overlap-width 0 0;
+        border-color: transparent $edges-color transparent transparent;
+      }
+      
+      div.ribbon-back-left {
+        top: -$overlap-height;
+      }
+    
+    //left-bottom side
+    } @else if $side ==  left-bottom {
+      
+      div.ribbon-edge-left-bottom {
+        top: $ribbon-height;
+        border-width: 0 $overlap-width $overlap-height 0;
+        border-color: transparent $edges-color transparent transparent;
+      }
+      
+      div.ribbon-back-left {
+        top: $overlap-height;
+      }
+    
+    //right-top side
+    } @else if $side ==  right-top {
+      
+      div.ribbon-edge-right-top {
+        bottom: ($ribbon-height + $overlap-height);
+        border-width: 0 $overlap-width $overlap-height 0;
+        border-color: transparent transparent $edges-color transparent;
+      }
+      
+      div.ribbon-back-right {
+        top: -$overlap-height;
+      }
+    
+    //right-bottom side
+    } @else if $side ==  right-bottom { 
+      
+      div.ribbon-edge-right-bottom {
+        top: $ribbon-height;
+        border-width: $overlap-height $overlap-width 0 0;
+        border-color: $edges-color transparent transparent transparent;
+      }
+      
+      div.ribbon-back-right {
+        top: $overlap-height;
+      }
+      
+    }
+  
+  }
+
+}
+
+//private mixins
+@mixin _ribbon-edge($position, $overlap-width, $overlap-distance) {
+
+  height:0;
+  width:0;
+  position: absolute;
+  z-index: 1;
+  #{$position}: -($overlap-width + $overlap-distance);
+  border-style:solid;
+  
+}
+
+@mixin _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, $position, $overlap-distance, $include-pie) {
+
+  width: $back-width;
+  height: $ribbon-height;
+  position: absolute;
+  z-index: 0;
+  @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px);
+  
+  @if $border-radius != 0 {
+  
+    @if $position == left {
+    
+      @include border-left-radius($border-radius);
+      
+    } @else if $position == right {
+    
+      @include border-right-radius($border-radius);
+    
+    }
+      
+  }
+  
+  background-color: $back-color;
+  #{$position}: -($back-width + $overlap-distance);
+  
+  @if $include-pie == true {
+  
+    @include pie;
+  
+  }
+
+}
+