Ajax Loader
×
HTML 
<h1>Shadow Generator</h1>
1
<h1>Shadow Generator</h1>
2
<textarea></textarea>
3
 
4
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
5
<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
6
<script src="https://rawgithub.com/infusion/jQuery-xcolor/master/jquery.xcolor.min.js"></script>
7
<script src="https://rawgithub.com/heyimjuani/iluminate/master/jquery.iluminate.js"></script>
8
 
9
<!-- HAVE FUN WITH PRESETS -->
10
 
11
<!--
12
IF YOU WANT TO HAVE COLORS IN HEX YOU CAN COPY IT DIRECTLY FROM CODE INSPECTOR
13
-->
 
CSS 
* {
1
* {
2
    padding: 0;
3
    margin: 0;
4
}
5
 
6
html, body {
7
    width: 100%;
8
    height: 100%;
9
    overflow: hidden;
10
}
11
textarea {
12
    font: 300 70% 'Open Sans', Arial;
13
    position: absolute;
14
    left: 0;
15
    bottom: 0;
16
    box-shadow: 0 -2px 12px #1D1D1D;
17
    background: rgba(255, 255, 255, 0.24);
18
    padding: 10px;
19
    width: 100%;
20
    height: 20%;
21
    min-height: 100px;
22
    border: none;
23
    outline: none;
24
}
25
h1 {
26
    height: 100%;
27
    font: 400 600%/150% 'Open Sans', sans-serif;
28
    text-align: center;
29
    padding: 50px 10px;
30
  
31
    letter-spacing: .15em;
32
    color: #1F1F1F;
33
    background: #FFF;
34
    -webkit-font-smoothing: antialiased;
35
}
 
JavaScript 
var options =
1
var options =
2
{
3
    uppercase: true,
4
    preset: 'Dark',
5
 
6
    presets: {
7
        Default: {
8
            iluminate: {
9
 
10
                direction: 'bottomLeft',
11
                textSize: 60,
12
                textAlpha: 0.2,
13
                fadeText: 0.5,
14
            },
15
            colors: {
16
                'background-color': '#FFFFFF',
17
                'color': '#000000',
18
            }
19
        },
20
 
21
        Extrude: {
22
            iluminate: {
23
 
24
                direction: 'bottomLeft',
25
                textSize: 11,
26
                textAlpha: 0.88,
27
                fadeText: 0.74,
28
            },
29
            colors: {
30
                'background-color': '#d9d9d9',
31
                'color': '#2d2d2d',
32
            }
33
        },
34
 
35
        BlueSky: {
36
            iluminate: {
37
 
38
                direction: 'bottomRight',
39
                textSize: 111,
40
                textAlpha: 0.08,
41
                fadeText: 1,
42
            },
43
            colors: {
44
                'background-color': '#00c2ff',
45
                'color': '#005d84',
46
            }
47
        },
48
 
49
        Green: {
50
            iluminate: {
51
 
52
                direction: 'topLeft',
53
                textSize: 26,
54
                textAlpha: 0.21,
55
                fadeText: 0.87,
56
            },
57
            colors: {
58
                'background-color': '#aacf90',
59
                'color': '#deffa2',
60
            }
61
        },
62
 
63
        Dark: {
64
            iluminate: {
65
                direction: 'bottomLeft',
66
                textSize: 50,
67
                textAlpha: 0.21,
68
                fadeText: 0.87,
69
            },
70
            colors: {
71
                'background-color': '#191f25',
72
                'color': '#252d37',
73
            }
74
        }
75
    },
76
 
77
    iluminate: {
78
 
79
        direction: 'bottomLeft',
80
        textSize: 60,
81
        textAlpha: 0.2,
82
        fadeText: 0.5,
83
 
84
        includeText: true,
85
        textOnly: true,
86
    },
87
 
88
    colors: {
89
        'background-color': '#FFFFFF',
90
        'color': '#000000',
91
    }
92
};
93
 
94
var applyPreset = function () {
95
    var extend = function (destination, source) {
96
        for (var property in source) {
97
            if (typeof source[property] === 'object')
98
                destination[property] = extend(destination[property], source[property]);
99
            else
100
                destination[property] = source[property];
101
        }
102
    }
103
 
104
    extend(options.iluminate, options.presets[options.preset].iluminate);
105
    extend(options.colors, options.presets[options.preset].colors);
106
 
107
    for (var i in gui.__controllers)
108
        gui.__controllers[i].updateDisplay();
109
 
110
    apply();
111
}
112
 
113
var apply = function () {
114
    $('h1')
115
        .css(options.colors)
116
        .css('text-transform', options.uppercase? 'uppercase' : '')
117
        .iluminate(options.iluminate);
118
 
119
 
120
    $('textarea').text('text-shadow: ' + $('h1').css('text-shadow') + ';');
121
}
122
 
123
 
124
var gui = new dat.GUI();
125
gui.add(options, 'preset', Object.keys(options.presets)).onChange(applyPreset);
126
gui.add(options.iluminate, 'direction', ["top", "topLeft", "topRight", "left", "right", "bottom", "bottomLeft", "bottomRight"]).onChange(apply);
127
gui.add(options.iluminate, 'textSize', 0, 200).onChange(apply);
128
gui.add(options.iluminate, 'textAlpha', 0, 1).onChange(apply);
129
gui.add(options.iluminate, 'fadeText', 0, 1).onChange(apply);
130
 
131
gui.addColor(options.colors, 'background-color').onChange(apply);
132
gui.addColor(options.colors, 'color').onChange(apply);
133
gui.add(options, 'uppercase').onChange(apply);
134
// gui.close();
135
applyPreset();
136
 
 

Long shadow generator

CSSDeck G+