omg-text 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.mkdn ADDED
@@ -0,0 +1,66 @@
1
+ OMG TEXT compass extension
2
+ ==========================
3
+
4
+ A way to create ridiculously awesome CSS3 text shadows
5
+ Insipred by Mark Otto's [CSS3 3D text](http://www.markdotto.com/2011/01/05/3d-text-using-just-css/)
6
+
7
+ Installation
8
+ ============
9
+
10
+ From the command line:
11
+
12
+ gem install omg-text
13
+
14
+ Install to an existing project:
15
+
16
+ # edit the project configuration file and add:
17
+ require 'omg-text'
18
+ compass install omg-text
19
+
20
+ Or create a new project:
21
+
22
+ compass create project_name -r omg-text --using omg-text
23
+
24
+
25
+ OMG TEXT Shadows
26
+ ================
27
+
28
+ OMG TEXT is a compass extension for adding a 3D css text shadow effect to your text.
29
+ The mixin takes a few arguements that gives you control over your shadows.
30
+
31
+ #OMG TEXT mixin with argument description
32
+ @include omg-text(shadow-color, angle, depth, style, shade-amout)
33
+
34
+ Argument definiton:
35
+
36
+ ### shadow-color:
37
+
38
+ The color of the text shadow that will be applied
39
+
40
+ ### angle:
41
+
42
+ 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.
43
+
44
+ * "top" (0)
45
+ * "top right" (45)
46
+ * "right" (90)
47
+ * "bottom right" (135)
48
+ * "bottom" (180)
49
+ * "bottom left" (220)
50
+ * "left" (270)
51
+ * "top left" (315)
52
+
53
+ ### depth:
54
+
55
+ 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.
56
+
57
+ ### style
58
+
59
+ There are two styles you can use, "flat" or "shaded". A flat text shadow will just 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
60
+
61
+ ![omg text styles](http://dl.dropbox.com/u/1274637/omg-shaded-flat.png)
62
+
63
+ ### shade-amount
64
+
65
+ 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 abouve uses a shade-amount of 0.8
66
+
data/lib/omg-text.rb ADDED
@@ -0,0 +1,3 @@
1
+ require 'compass'
2
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
3
+ Compass::Frameworks.register('omg-text', :path => extension_path)
@@ -0,0 +1,49 @@
1
+ @import "compass/css3/text-shadow"
2
+ $direction-markup : false
3
+ $angle: 0
4
+
5
+
6
+ @mixin omg-text($color, $direction: 0, $levels: 15 , $style: "flat", $darken-amount: 0)
7
+
8
+ $shadowColor : $color
9
+ $shadow-markup : ""
10
+ $darken-amount: $darken-amount
11
+
12
+
13
+ @for $i from 0 through $levels
14
+ @include omg-text-offest($direction, $i)
15
+
16
+ @if $style == "shaded"
17
+
18
+ $shadowColor : darken($shadowColor, $i * ($darken-amount/10))
19
+ @else if $style == "flat"
20
+ $shadowColor : $color
21
+
22
+ $shadow-markup : $shadow-markup + $direction-markup + $shadowColor
23
+ @if $i < $levels
24
+ $shadow-markup: $shadow-markup + ", "
25
+
26
+ @include text-shadow(unquote($shadow-markup))
27
+
28
+ @mixin omg-text-offest($direction, $i)
29
+
30
+ @if $direction == "top"
31
+ $angle: 0deg
32
+ @else if $direction == "top right"
33
+ $angle: 45deg
34
+ @else if $direction == "right"
35
+ $angle: 90deg
36
+ @else if $direction == "bottom right"
37
+ $angle: 135deg
38
+ @else if $direction == "bottom"
39
+ $angle: 180deg
40
+ @else if $direction == "bottom left"
41
+ $angle: 225deg
42
+ @else if $direction == "left"
43
+ $angle: 270deg
44
+ @else if $direction == "top left"
45
+ $angle: 315deg
46
+ @else
47
+ $angle: $direction/2 * (pi()/180)
48
+
49
+ $direction-markup : ($i) * sin($angle * 2) + "px " + -($i) * cos($angle * 2) + "px 0 "
@@ -0,0 +1,27 @@
1
+ @import "omg-text"
2
+
3
+ // Here are some sample usage cases.
4
+
5
+ #omg-text-sample-1
6
+ font-size: 190px
7
+ margin: 10px 0
8
+ color: #fff
9
+ @include omg-text(#759da6, 220, 25, "shaded", 0.35)
10
+
11
+ #omg-text-sample-2
12
+ margin: 10px 0
13
+ font-size: 180px
14
+ color: #82cffb
15
+ @include omg-text(#5193b9, 45, 15, "shaded", 0.3)
16
+
17
+ #omg-text-sample-3
18
+ margin: 10px 0
19
+ font-size: 320px
20
+ color: #8ccf3c
21
+ @include omg-text(#b8e880, "top left", 35, "shaded", 0.3)
22
+
23
+ #omg-text-sample-4
24
+ margin: 10px 0
25
+ font-size: 180px
26
+ color: #e8d850
27
+ @include omg-text(#ef8e3f, "right", 22, "flat", 0)
@@ -0,0 +1,11 @@
1
+ stylesheet '_omgtext.sass', :media => 'screen, projection'
2
+
3
+ description "ridiculous css3 text shadows"
4
+
5
+ help %Q{
6
+ Installs a html file and stylesheet that you can use as a reference or use as a base for your project
7
+ }
8
+
9
+ welcome_message %Q{
10
+ Refer to the stylesheet and html file for useage examples
11
+ }
metadata ADDED
@@ -0,0 +1,83 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: omg-text
3
+ version: !ruby/object:Gem::Version
4
+ prerelease: false
5
+ segments:
6
+ - 0
7
+ - 0
8
+ - 1
9
+ version: 0.0.1
10
+ platform: ruby
11
+ authors:
12
+ - Jared Hardy
13
+ autorequire:
14
+ bindir: bin
15
+ cert_chain: []
16
+
17
+ date: 2011-03-01 00:00:00 -08:00
18
+ default_executable:
19
+ dependencies:
20
+ - !ruby/object:Gem::Dependency
21
+ name: compass
22
+ prerelease: false
23
+ requirement: &id001 !ruby/object:Gem::Requirement
24
+ none: false
25
+ requirements:
26
+ - - ">="
27
+ - !ruby/object:Gem::Version
28
+ segments:
29
+ - 0
30
+ - 10
31
+ - 0
32
+ - rc3
33
+ version: 0.10.0.rc3
34
+ type: :runtime
35
+ version_requirements: *id001
36
+ description: a ridiculous text shadows extension for compass
37
+ email: jared@jaredhardy.com
38
+ executables: []
39
+
40
+ extensions: []
41
+
42
+ extra_rdoc_files: []
43
+
44
+ files:
45
+ - README.mkdn
46
+ - lib/omg-text.rb
47
+ - stylesheets/_omg-text.sass
48
+ - templates/project/_omgtext.sass
49
+ - templates/project/manifest.rb
50
+ has_rdoc: true
51
+ homepage: http://www.jaredhardy.com/
52
+ licenses: []
53
+
54
+ post_install_message:
55
+ rdoc_options: []
56
+
57
+ require_paths:
58
+ - lib
59
+ required_ruby_version: !ruby/object:Gem::Requirement
60
+ none: false
61
+ requirements:
62
+ - - ">="
63
+ - !ruby/object:Gem::Version
64
+ segments:
65
+ - 0
66
+ version: "0"
67
+ required_rubygems_version: !ruby/object:Gem::Requirement
68
+ none: false
69
+ requirements:
70
+ - - ">="
71
+ - !ruby/object:Gem::Version
72
+ segments:
73
+ - 0
74
+ version: "0"
75
+ requirements: []
76
+
77
+ rubyforge_project:
78
+ rubygems_version: 1.3.7
79
+ signing_key:
80
+ specification_version: 3
81
+ summary: a ridiculous text shadows extension for compass
82
+ test_files: []
83
+