omg-text 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +60 -20
- data/stylesheets/_omg-text.sass +45 -21
- data/templates/project/manifest.rb +3 -3
- data/templates/project/omgtext.sass +35 -0
- metadata +6 -19
- data/templates/project/_omgtext.sass +0 -27
data/README.mkdn
CHANGED
|
@@ -1,37 +1,49 @@
|
|
|
1
1
|
OMG TEXT compass extension
|
|
2
2
|
==========================
|
|
3
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/)
|
|
4
|
+
A way to create ridiculously awesome CSS3 text shadows. See the extension in action on the [demo page](http://dl.dropbox.com/u/1274637/omg-text-example/omg-text.html).
|
|
6
5
|
|
|
7
6
|
Installation
|
|
8
7
|
============
|
|
9
8
|
|
|
10
9
|
From the command line:
|
|
11
10
|
|
|
12
|
-
gem install omg-text
|
|
11
|
+
sudo gem install omg-text
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
Installing into an existing project:
|
|
15
14
|
|
|
16
15
|
# edit the project configuration file and add:
|
|
17
16
|
require 'omg-text'
|
|
17
|
+
|
|
18
|
+
#from the command line
|
|
18
19
|
compass install omg-text
|
|
19
|
-
|
|
20
|
+
|
|
21
|
+
#import the extension into your scss/sass file
|
|
22
|
+
@import "omg-text"
|
|
23
|
+
|
|
20
24
|
Or create a new project:
|
|
21
25
|
|
|
22
|
-
compass create project_name -r omg-text --using omg-text
|
|
26
|
+
compass create <project_name> -r omg-text --using omg-text
|
|
27
|
+
|
|
28
|
+
#import the extension into your scss/sass file
|
|
29
|
+
@import "omg-text"
|
|
30
|
+
|
|
23
31
|
|
|
24
32
|
|
|
25
33
|
OMG TEXT Shadows
|
|
26
34
|
================
|
|
27
35
|
|
|
28
|
-
OMG TEXT is a compass extension for adding
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
#OMG TEXT mixin with argument description
|
|
32
|
-
@include omg-text(shadow-color, angle, depth, style,
|
|
36
|
+
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.
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
#OMG TEXT mixin with argument description for flat and shaded styles
|
|
40
|
+
@include omg-text(shadow-color, angle, depth, style, shade-amout)
|
|
33
41
|
|
|
34
|
-
|
|
42
|
+
#OMG TEXT mixin with argument description for offset style
|
|
43
|
+
@include omg-offset(angle, shadow 1 color, shadow 1 depth, shadow 2 color, shadow 2 depth)
|
|
44
|
+
|
|
45
|
+
Argument definitons:
|
|
46
|
+
====================
|
|
35
47
|
|
|
36
48
|
### shadow-color:
|
|
37
49
|
|
|
@@ -42,25 +54,53 @@ The color of the text shadow that will be applied
|
|
|
42
54
|
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
55
|
|
|
44
56
|
* "top" (0)
|
|
45
|
-
* "top
|
|
57
|
+
* "top-right" (45)
|
|
46
58
|
* "right" (90)
|
|
47
|
-
* "bottom
|
|
59
|
+
* "bottom-right" (135)
|
|
48
60
|
* "bottom" (180)
|
|
49
|
-
* "bottom
|
|
61
|
+
* "bottom-left" (220)
|
|
50
62
|
* "left" (270)
|
|
51
|
-
* "top
|
|
63
|
+
* "top-left" (315)
|
|
52
64
|
|
|
53
65
|
### depth:
|
|
54
66
|
|
|
55
67
|
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
68
|
|
|
57
|
-
### style
|
|
69
|
+
### style:
|
|
58
70
|
|
|
59
|
-
There are two styles you can use, "flat" or "shaded". A flat text shadow will
|
|
71
|
+
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
|
|
60
72
|
|
|
61
73
|
|
|
62
74
|
|
|
63
|
-
### shade-amount
|
|
75
|
+
### shade-amount:
|
|
76
|
+
|
|
77
|
+
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.
|
|
78
|
+
|
|
79
|
+
Examples
|
|
80
|
+
========
|
|
81
|
+
|
|
82
|
+
See some live examples on the [demo page](http://dl.dropbox.com/u/1274637/omg-text-example/omg-text.html).
|
|
83
|
+
|
|
84
|
+
#omg-flat-sample-1
|
|
85
|
+
@include omg-text(#db2cac, 220, 45, "shaded", 0.35)
|
|
86
|
+
|
|
87
|
+
#omg-flat-sample-2
|
|
88
|
+
@include omg-text(#ef8e3f, "right", 22, "flat", 0)
|
|
89
|
+
|
|
90
|
+
#omg-shaded-sample-1
|
|
91
|
+
@include omg-text(#5193b9, 90, 35, "shaded", 5)
|
|
92
|
+
|
|
93
|
+
#omg-shaded-sample-2
|
|
94
|
+
@include omg-text(#b8e880, "top-left", 35, "shaded", 3)
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
#omg-offset-sample-1
|
|
98
|
+
@include omg-offset(130, #fff, 6, #ccc, 12)
|
|
99
|
+
|
|
100
|
+
#omg-offset-sample-2
|
|
101
|
+
@include omg-offset("bottom-left", #fff, 6, #e75032, 10)
|
|
102
|
+
|
|
64
103
|
|
|
65
|
-
|
|
104
|
+
|
|
105
|
+
|
|
66
106
|
|
data/stylesheets/_omg-text.sass
CHANGED
|
@@ -9,41 +9,65 @@ $angle: 0
|
|
|
9
9
|
$shadow-markup : ""
|
|
10
10
|
$darken-amount: $darken-amount
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
// Loop through all the levels specified
|
|
13
13
|
@for $i from 0 through $levels
|
|
14
|
-
|
|
14
|
+
//for each level apply a text shadow at the correct angle
|
|
15
|
+
@include omg-text-offset($direction, $i)
|
|
15
16
|
|
|
16
17
|
@if $style == "shaded"
|
|
17
|
-
|
|
18
|
-
$shadowColor : darken($shadowColor, $i * ($darken-amount/
|
|
18
|
+
// Darken the shadow text color
|
|
19
|
+
$shadowColor : darken($shadowColor, $i * ($darken-amount/100))
|
|
19
20
|
@else if $style == "flat"
|
|
21
|
+
// Keep same color
|
|
20
22
|
$shadowColor : $color
|
|
21
|
-
|
|
23
|
+
|
|
24
|
+
// Update the string that is used to create the text shadow
|
|
22
25
|
$shadow-markup : $shadow-markup + $direction-markup + $shadowColor
|
|
26
|
+
// 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
|
|
23
27
|
@if $i < $levels
|
|
24
28
|
$shadow-markup: $shadow-markup + ", "
|
|
25
29
|
|
|
30
|
+
// After loop finishes add the text shadow
|
|
26
31
|
@include text-shadow(unquote($shadow-markup))
|
|
27
32
|
|
|
28
|
-
|
|
33
|
+
|
|
34
|
+
@mixin omg-offset($angle, $color1, $levels1, $color2, $levels2)
|
|
35
|
+
|
|
36
|
+
$shadow-markup : ""
|
|
37
|
+
|
|
38
|
+
@include omg-text-offset($angle, $levels1)
|
|
39
|
+
$shadow-markup: $shadow-markup + $direction-markup + $color1 + ", "
|
|
29
40
|
|
|
41
|
+
@include omg-text-offset($angle, $levels2)
|
|
42
|
+
$shadow-markup: $shadow-markup + $direction-markup + $color2
|
|
43
|
+
|
|
44
|
+
@include text-shadow(unquote($shadow-markup))
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
@mixin omg-text-offset($direction, $i)
|
|
50
|
+
|
|
51
|
+
// Shortcuts for directions
|
|
30
52
|
@if $direction == "top"
|
|
31
|
-
$
|
|
32
|
-
@else if $direction == "top
|
|
33
|
-
$
|
|
53
|
+
$direction: 0
|
|
54
|
+
@else if $direction == "top-right"
|
|
55
|
+
$direction: 45
|
|
34
56
|
@else if $direction == "right"
|
|
35
|
-
$
|
|
36
|
-
@else if $direction == "bottom
|
|
37
|
-
$
|
|
57
|
+
$direction: 90
|
|
58
|
+
@else if $direction == "bottom-right"
|
|
59
|
+
$direction: 135
|
|
38
60
|
@else if $direction == "bottom"
|
|
39
|
-
$
|
|
40
|
-
@else if $direction == "bottom
|
|
41
|
-
$
|
|
61
|
+
$direction: 180
|
|
62
|
+
@else if $direction == "bottom-left"
|
|
63
|
+
$direction: 225
|
|
42
64
|
@else if $direction == "left"
|
|
43
|
-
$
|
|
44
|
-
@else if $direction == "top
|
|
45
|
-
$
|
|
65
|
+
$direction: 270
|
|
66
|
+
@else if $direction == "top-left"
|
|
67
|
+
$direction: 315
|
|
46
68
|
@else
|
|
47
|
-
$
|
|
48
|
-
|
|
49
|
-
$
|
|
69
|
+
$direction: $direction
|
|
70
|
+
|
|
71
|
+
$angle: $direction * (pi()/180)
|
|
72
|
+
// Calculate the correct angle
|
|
73
|
+
$direction-markup : ($i) * sin($angle) + "px " + -($i) * cos($angle) + "px 0 "
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
stylesheet '
|
|
1
|
+
stylesheet 'omgtext.sass', :media => 'screen, projection'
|
|
2
2
|
|
|
3
3
|
description "ridiculous css3 text shadows"
|
|
4
4
|
|
|
5
5
|
help %Q{
|
|
6
|
-
Installs a
|
|
6
|
+
Installs a stylesheet that you can use as a reference for usage examples
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
welcome_message %Q{
|
|
10
|
-
Refer to the stylesheet
|
|
10
|
+
Refer to the stylesheet file for usage examples
|
|
11
11
|
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
@import "omg-text"
|
|
2
|
+
|
|
3
|
+
// Here are some sample usage cases.
|
|
4
|
+
|
|
5
|
+
#omg-flat-sample-1
|
|
6
|
+
font-size: 320px
|
|
7
|
+
color: #ffbeed
|
|
8
|
+
@include omg-text(#db2cac, 220, 45, "shaded", 0.35)
|
|
9
|
+
|
|
10
|
+
#omg-flat-sample-2
|
|
11
|
+
font-size: 320px
|
|
12
|
+
color: #e8d850
|
|
13
|
+
@include omg-text(#ef8e3f, "right", 22, "flat", 0)
|
|
14
|
+
|
|
15
|
+
#omg-shaded-sample-1
|
|
16
|
+
font-size: 320px
|
|
17
|
+
color: #82cffb
|
|
18
|
+
@include omg-text(#5193b9, 90, 35, "shaded", 5)
|
|
19
|
+
|
|
20
|
+
#omg-shaded-sample-2
|
|
21
|
+
font-size: 320px
|
|
22
|
+
color: #8ccf3c
|
|
23
|
+
@include omg-text(#b8e880, "top-left", 35, "shaded", 3)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
#omg-offset-sample-1
|
|
27
|
+
font-size: 320px
|
|
28
|
+
color: #222
|
|
29
|
+
@include omg-offset(130, #fff, 6, #ccc, 12)
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
#omg-offset-sample-2
|
|
33
|
+
font-size: 320px
|
|
34
|
+
color: #e75032
|
|
35
|
+
@include omg-offset("bottom-left", #fff, 6, #e75032, 10)
|
metadata
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: omg-text
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
prerelease:
|
|
5
|
-
|
|
6
|
-
- 0
|
|
7
|
-
- 0
|
|
8
|
-
- 1
|
|
9
|
-
version: 0.0.1
|
|
4
|
+
prerelease:
|
|
5
|
+
version: 0.0.2
|
|
10
6
|
platform: ruby
|
|
11
7
|
authors:
|
|
12
8
|
- Jared Hardy
|
|
@@ -14,7 +10,7 @@ autorequire:
|
|
|
14
10
|
bindir: bin
|
|
15
11
|
cert_chain: []
|
|
16
12
|
|
|
17
|
-
date: 2011-
|
|
13
|
+
date: 2011-04-17 00:00:00 -07:00
|
|
18
14
|
default_executable:
|
|
19
15
|
dependencies:
|
|
20
16
|
- !ruby/object:Gem::Dependency
|
|
@@ -25,11 +21,6 @@ dependencies:
|
|
|
25
21
|
requirements:
|
|
26
22
|
- - ">="
|
|
27
23
|
- !ruby/object:Gem::Version
|
|
28
|
-
segments:
|
|
29
|
-
- 0
|
|
30
|
-
- 10
|
|
31
|
-
- 0
|
|
32
|
-
- rc3
|
|
33
24
|
version: 0.10.0.rc3
|
|
34
25
|
type: :runtime
|
|
35
26
|
version_requirements: *id001
|
|
@@ -45,10 +36,10 @@ files:
|
|
|
45
36
|
- README.mkdn
|
|
46
37
|
- lib/omg-text.rb
|
|
47
38
|
- stylesheets/_omg-text.sass
|
|
48
|
-
- templates/project/_omgtext.sass
|
|
49
39
|
- templates/project/manifest.rb
|
|
40
|
+
- templates/project/omgtext.sass
|
|
50
41
|
has_rdoc: true
|
|
51
|
-
homepage: http://www.jaredhardy.com/
|
|
42
|
+
homepage: http://www.jaredhardy.com/omg-text/
|
|
52
43
|
licenses: []
|
|
53
44
|
|
|
54
45
|
post_install_message:
|
|
@@ -61,21 +52,17 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
61
52
|
requirements:
|
|
62
53
|
- - ">="
|
|
63
54
|
- !ruby/object:Gem::Version
|
|
64
|
-
segments:
|
|
65
|
-
- 0
|
|
66
55
|
version: "0"
|
|
67
56
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
68
57
|
none: false
|
|
69
58
|
requirements:
|
|
70
59
|
- - ">="
|
|
71
60
|
- !ruby/object:Gem::Version
|
|
72
|
-
segments:
|
|
73
|
-
- 0
|
|
74
61
|
version: "0"
|
|
75
62
|
requirements: []
|
|
76
63
|
|
|
77
64
|
rubyforge_project:
|
|
78
|
-
rubygems_version: 1.
|
|
65
|
+
rubygems_version: 1.6.2
|
|
79
66
|
signing_key:
|
|
80
67
|
specification_version: 3
|
|
81
68
|
summary: a ridiculous text shadows extension for compass
|
|
@@ -1,27 +0,0 @@
|
|
|
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)
|