Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Compass extension to create 3D CSS Ribbons
CSS Ruby
tree: 747725ef0f

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
stylesheets
templates/project
3d-ribbon.gemspec
README.markdown

README.markdown

3D CSS Ribbons

A extension (for Compass) to create 3D ribbons using only CSS. Live example.

some nice example

The extension is inspired in 3D 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.

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. 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);
}
Something went wrong with that request. Please try again.