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 +66 -0
- data/lib/omg-text.rb +3 -0
- data/stylesheets/_omg-text.sass +49 -0
- data/templates/project/_omgtext.sass +27 -0
- data/templates/project/manifest.rb +11 -0
- metadata +83 -0
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
|
+
|
|
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,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
|
+
|