Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added offset text shadow style and updated angle shortcut alias

  • Loading branch information...
commit e8f73a820bf773ddddb574293a29dce2dcb57e43 1 parent 63f71b3
@jhardy authored
View
29 README.mkdn
@@ -1,15 +1,14 @@
OMG TEXT compass extension
==========================
-A way to create ridiculously awesome CSS3 text shadows.
-Insipred by Mark Otto's [CSS3 3D text](http://www.markdotto.com/2011/01/05/3d-text-using-just-css/). See a quick [demo](http://dl.dropbox.com/u/1274637/omg-text-example/omg-text.html) of the extension in action.
+A way to create ridiculously awesome CSS3 text shadows. See a quick [demo](http://dl.dropbox.com/u/1274637/omg-text-example/omg-text.html) of the extension in action.
Installation
============
From the command line:
- gem install omg-text
+ sudo gem install omg-text
Install to an existing project:
@@ -19,7 +18,7 @@ Install to an existing project:
Or create a new project:
- compass create project_name -r omg-text --using omg-text
+ compass create <project_name> -r omg-text --using omg-text
Now just import the OMG TEXT extension:
@@ -30,11 +29,14 @@ Now just import the OMG TEXT extension:
OMG TEXT Shadows
================
-OMG TEXT is a compass extension for adding a 3D css text shadow effect to your text.
-The mixin takes a few arguements that gives you control over your shadows.
-
- #OMG TEXT mixin with argument description
- @include omg-text(shadow-color, angle, depth, style, shade-amout)
+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 definiton:
@@ -67,7 +69,7 @@ There are two styles you can use, "flat" or "shaded". A flat text shadow will ju
### shade-amount:
-This is only required if you use the "shaded" style. A value greather than 1 will get dark fastly a value less than 1 will provide more sublte shading. The shaded example above uses a shade-amount of 0.8
+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
=======
@@ -78,13 +80,16 @@ The mixins used to create the text shadows in the quick [demo page](http://dl.dr
@include omg-text(#759da6, 220, 25, "shaded", 0.35)
#omg-text-sample-2
- @include omg-text(#5193b9, 45, 19, "flat", 0.3)
+ @include omg-text(#5193b9, 45, 19, "flat")
#omg-text-sample-3
@include omg-text(#b8e880, "top left", 25, "shaded", 0.3)
#omg-text-sample-4
- @include omg-text(#ef8e3f, "right", 22, "flat", 0)
+ @include omg-text(#ef8e3f, "right", 22, "flat")
+
+ #omg-offset-sample-1
+ @include omg-offset(140, #1672b3, 10%, 4, #1672b3, 7)
View
4 omg-text.gemspec
@@ -1,7 +1,7 @@
Gem::Specification.new do |s|
# Release Specific Information
- s.version = "0.0.1"
- s.date = "2011-03-1"
+ s.version = "0.0.2"
+ s.date = "2011-04-17"
# Gem Details
s.name = "omg-text"
View
66 stylesheets/_omg-text.sass
@@ -9,41 +9,65 @@ $angle: 0
$shadow-markup : ""
$darken-amount: $darken-amount
-
+ // Loop through all the levels specified
@for $i from 0 through $levels
- @include omg-text-offest($direction, $i)
+ //for each level apply a text shadow at the correct angle
+ @include omg-text-offset($direction, $i)
@if $style == "shaded"
-
- $shadowColor : darken($shadowColor, $i * ($darken-amount/10))
+ // Darken the shadow text color
+ $shadowColor : darken($shadowColor, $i * ($darken-amount/100))
@else if $style == "flat"
+ // Keep same color
$shadowColor : $color
-
+
+ // Update the string that is used to create the text shadow
$shadow-markup : $shadow-markup + $direction-markup + $shadowColor
+ // If you are not on the last level add a comma at the end of the string so you can apply the next text shadow
@if $i < $levels
$shadow-markup: $shadow-markup + ", "
+ // After loop finishes add the text shadow
@include text-shadow(unquote($shadow-markup))
-@mixin omg-text-offest($direction, $i)
+
+@mixin omg-offset($angle, $color1, $levels1, $color2, $levels2)
+
+ $shadow-markup : ""
+
+ @include omg-text-offset($angle, $levels1)
+ $shadow-markup: $shadow-markup + $direction-markup + $color1 + ", "
+ @include omg-text-offset($angle, $levels2)
+ $shadow-markup: $shadow-markup + $direction-markup + $color2
+
+ @include text-shadow(unquote($shadow-markup))
+
+
+
+
+@mixin omg-text-offset($direction, $i)
+
+ // Shortcuts for directions
@if $direction == "top"
- $angle: 0deg
- @else if $direction == "top right"
- $angle: 45deg
+ $direction: 0
+ @else if $direction == "top-right"
+ $direction: 45
@else if $direction == "right"
- $angle: 90deg
- @else if $direction == "bottom right"
- $angle: 135deg
+ $direction: 90
+ @else if $direction == "bottom-right"
+ $direction: 135
@else if $direction == "bottom"
- $angle: 180deg
- @else if $direction == "bottom left"
- $angle: 225deg
+ $direction: 180
+ @else if $direction == "bottom-left"
+ $direction: 225
@else if $direction == "left"
- $angle: 270deg
- @else if $direction == "top left"
- $angle: 315deg
+ $direction: 270
+ @else if $direction == "top-left"
+ $direction: 315
@else
- $angle: $direction/2 * (pi()/180)
-
- $direction-markup : ($i) * sin($angle * 2) + "px " + -($i) * cos($angle * 2) + "px 0 "
+ $direction: $direction
+
+ $angle: $direction * (pi()/180)
+ // Calculate the correct angle
+ $direction-markup : ($i) * sin($angle) + "px " + -($i) * cos($angle) + "px 0 "
View
6 templates/project/manifest.rb
@@ -1,11 +1,11 @@
-stylesheet '_omgtext.sass', :media => 'screen, projection'
+stylesheet 'omgtext.sass', :media => 'screen, projection'
description "ridiculous css3 text shadows"
help %Q{
-Installs a html file and stylesheet that you can use as a reference or use as a base for your project
+Installs a stylesheet that you can use as a reference for usage examples
}
welcome_message %Q{
-Refer to the stylesheet and html file for useage examples
+Refer to the stylesheet file for usage examples
}
View
35 templates/project/omgtext.sass
@@ -0,0 +1,35 @@
+@import "omg-text"
+
+// Here are some sample usage cases.
+
+#omg-flat-sample-1
+ font-size: 320px
+ color: #ffbeed
+ @include omg-text(#db2cac, 220, 45, "shaded", 0.35)
+
+#omg-flat-sample-2
+ font-size: 320px
+ color: #e8d850
+ @include omg-text(#ef8e3f, "right", 22, "flat", 0)
+
+#omg-shaded-sample-1
+ font-size: 320px
+ color: #82cffb
+ @include omg-text(#5193b9, 90, 35, "shaded", 5)
+
+#omg-shaded-sample-2
+ font-size: 320px
+ color: #8ccf3c
+ @include omg-text(#b8e880, "top-left", 35, "shaded", 3)
+
+
+#omg-offset-sample-1
+ font-size: 320px
+ color: #222
+ @include omg-offset(130, #fff, 6, #ccc, 12)
+
+
+#omg-offset-sample-2
+ font-size: 320px
+ color: #e75032
+ @include omg-offset("bottom-left", #fff, 6, #e75032, 10)
Please sign in to comment.
Something went wrong with that request. Please try again.