OMG TEXT compass extension

A way to create ridiculously awesome CSS3 text shadows. See the extension in action on the demo page.

Installation

From the command line:

sudo gem install omg-text

Installing into an existing project:

# edit the project configuration file and add:
require 'omg-text'

#from the command line
compass install omg-text

#import the extension into your scss/sass file
@import "omg-text"

Or create a new project:

compass create <project_name> -r omg-text --using omg-text 

#import the extension into your scss/sass file
@import "omg-text"

OMG TEXT Shadows

OMG TEXT is a compass extension for adding multiple text shadows to your text. The extension provides two easy to use mixins for adding the shadows. There are three shadow styles for you to choose from, flat, shaded and offset. The flat and shaded styles share the same mixin and the offset style has a mixin of its own.

#OMG TEXT mixin with argument description for flat and shaded styles
@include omg-text(shadow-color, angle, depth, style, shade-amout)

#OMG TEXT mixin with argument description for offset style
@include omg-offset(angle, shadow 1 color, shadow 1 depth, shadow 2 color, shadow 2 depth)

Argument definitons:

shadow-color:

The color of the text shadow that will be applied

angle:

The angle of the text shadow. You simple pass the number of the angle you would like or optionally there are a few presets you can use by passing a string. Here is the list of the presets with its associated angle.

• "top" (0)
• "top-right" (45)
• "right" (90)
• "bottom-right" (135)
• "bottom" (180)
• "bottom-left" (220)
• "left" (270)
• "top-left" (315)

depth:

The depth of the text shadow, a depth of 10 will produce 10 shadows and will be a shallow, a depth of 70 will produce 70 shadows and appear deeper.

style:

There are two styles you can use, "flat" or "shaded". A flat text shadow will repeat the same color for the complete depth. A shaded shadow will result in the color of the text shadow being darkened as the depth increase. Example: "shaded" is on the left "flat" is on the right, both use the same shadow-color

shade-amount:

This is only required if you use the "shaded" style, the higher the number the darker the final color of the shadow transition will be.

Examples

See some live examples on the demo page.

#omg-flat-sample-1 
@include omg-text(#db2cac, 220, 45, "shaded", 0.35) 

#omg-flat-sample-2 
@include omg-text(#ef8e3f, "right", 22, "flat", 0)	

#omg-shaded-sample-1 
@include omg-text(#5193b9, 90, 35, "shaded", 5) 

#omg-shaded-sample-2 
@include omg-text(#b8e880, "top-left", 35, "shaded", 3) 


#omg-offset-sample-1 
@include omg-offset(130, #fff, 6, #ccc, 12)	

#omg-offset-sample-2 
@include omg-offset("bottom-left", #fff, 6, #e75032, 10)