magic_stylez 0.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.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/Gemfile +14 -0
- data/MIT-LICENSE +20 -0
- data/README.md +33 -0
- data/Rakefile +32 -0
- data/lib/magic_stylez/engine.rb +10 -0
- data/lib/magic_stylez/version.rb +3 -0
- data/lib/magic_stylez.rb +53 -0
- data/lib/tasks/magic_stylez_tasks.rake +4 -0
- data/magic_stylez.gemspec +38 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/images/.keep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +15 -0
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +71 -0
- data/test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco +70 -0
- data/test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco +1528 -0
- data/test/dummy/app/assets/javascripts/views/elements/arrow_infos.jst.eco +46 -0
- data/test/dummy/app/assets/javascripts/views/layout/corset.jst.eco +27 -0
- data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco +76 -0
- data/test/dummy/app/assets/javascripts/views/layout/section.jst.eco +109 -0
- data/test/dummy/app/assets/javascripts/views/layout/slide_boxes.jst.eco +33 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +180 -0
- data/test/dummy/app/controllers/application_controller.rb +6 -0
- data/test/dummy/app/controllers/concerns/.keep +0 -0
- data/test/dummy/app/controllers/front_controller.rb +7 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/mailers/.keep +0 -0
- data/test/dummy/app/models/.keep +0 -0
- data/test/dummy/app/models/concerns/.keep +0 -0
- data/test/dummy/app/views/front/_aside.html.erb +36 -0
- data/test/dummy/app/views/front/start.html.erb +77 -0
- data/test/dummy/app/views/layouts/application.html.erb +24 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config/application.rb +32 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +49 -0
- data/test/dummy/config/environments/production.rb +88 -0
- data/test/dummy/config/environments/test.rb +39 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +61 -0
- data/test/dummy/config/secrets.yml +20 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/lib/assets/.keep +0 -0
- data/test/dummy/log/.keep +0 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/public/xindex.html +135 -0
- data/test/magic_stylez_test.rb +7 -0
- data/test/test_helper.rb +21 -0
- data/vendor/assets/filter/magic/filter.svg +10 -0
- data/vendor/assets/filter/magic/noise.svg +70 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.eot +0 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.svg +461 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.ttf +0 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.woff +0 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.eot +0 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.svg +172 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.ttf +0 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.woff +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round1-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round1-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round2-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round2-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow1-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow1-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow1.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-1.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-2.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow3-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow3-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow4-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow4-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow5-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow5-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow6-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow6-b.png +0 -0
- data/vendor/assets/images/magic/bgs/hdr_landsberger.jpg +0 -0
- data/vendor/assets/images/magic/bgs/rain-flower.jpg +0 -0
- data/vendor/assets/images/magic/bgs/seucide.jpg +0 -0
- data/vendor/assets/javascripts/magic/render_eco.js.coffee +9 -0
- data/vendor/assets/javascripts/magic-stylez.js.coffee +49 -0
- data/vendor/assets/stylesheets/magic/_animation.scss +3 -0
- data/vendor/assets/stylesheets/magic/_forms.scss +42 -0
- data/vendor/assets/stylesheets/magic/_text.scss +41 -0
- data/vendor/assets/stylesheets/magic/content/_banner.scss +77 -0
- data/vendor/assets/stylesheets/magic/corporate/_colors.scss +244 -0
- data/vendor/assets/stylesheets/magic/corporate/_fonts.scss +152 -0
- data/vendor/assets/stylesheets/magic/corporate/_typo.scss +57 -0
- data/vendor/assets/stylesheets/magic/corporate/_variables.scss +636 -0
- data/vendor/assets/stylesheets/magic/effects/_reflections.scss +52 -0
- data/vendor/assets/stylesheets/magic/effects/_shadows.scss +255 -0
- data/vendor/assets/stylesheets/magic/icons/magicons.scss +706 -0
- data/vendor/assets/stylesheets/magic/icons/orderlifticons.scss +258 -0
- data/vendor/assets/stylesheets/magic/layout/_corset.scss +60 -0
- data/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss +176 -0
- data/vendor/assets/stylesheets/magic/layout/_section.scss +126 -0
- data/vendor/assets/stylesheets/magic/layout/_tables.scss +513 -0
- data/vendor/assets/stylesheets/magic/lib/_cross_browser.scss +51 -0
- data/vendor/assets/stylesheets/magic/lib/_media_querries.scss +59 -0
- data/vendor/assets/stylesheets/magic/lib/_twbs.scss +55 -0
- data/vendor/assets/stylesheets/magic/lists/_nav.scss +207 -0
- data/vendor/assets/stylesheets/magic-stylez.scss +140 -0
- metadata +397 -0
|
@@ -0,0 +1,1528 @@
|
|
|
1
|
+
<div class="section head">
|
|
2
|
+
<div class="corset">
|
|
3
|
+
<h1>Shadows</h1>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
<div class="section">
|
|
10
|
+
<div class="corset top">
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<div class="box">
|
|
15
|
+
<div class="head">
|
|
16
|
+
<a name="all">All Samples</a>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="inner">
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
<div class="samplebox raised_shadow smal">
|
|
23
|
+
<h2>Raised Shadow</h2>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
<div class="samplebox lifted_shadow smal">
|
|
31
|
+
<h2>Lifted Shadow</h2>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
<div class="samplebox vertical_curves smal">
|
|
39
|
+
<h2>Vertical Curves</h2>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<div class="samplebox horizontal_curves smal">
|
|
47
|
+
<h2>Horizontal Curves</h2>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<div class="samplebox vertical_shine smal">
|
|
56
|
+
<h2>Vertical Shine</h2>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
<div class="samplebox horizontal_shine smal">
|
|
64
|
+
<h2>Horizontal Shine</h2>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
<div class="samplebox single_shine smal">
|
|
73
|
+
<h2>Single Shine</h2>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
<div class="samplebox single_curve smal">
|
|
81
|
+
<h2>Single Curve</h2>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
<div class="samplebox paper_shadow smal">
|
|
90
|
+
<h2>Paper Shadow</h2>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
<div class="samplebox pseudo_raised_shadow smal">
|
|
103
|
+
<h2>Pseudo-Raised Shadow</h2>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
<div class="samplebox perspective_shadow smal">
|
|
111
|
+
<h2>Perspective Shadow</h2>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
<div class="clearfix"></div>
|
|
117
|
+
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="section">
|
|
123
|
+
<div class="corset top">
|
|
124
|
+
|
|
125
|
+
<div class="box">
|
|
126
|
+
|
|
127
|
+
<div class="head">
|
|
128
|
+
<a name="raised_shadow">Raised Shadow</a>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
<div class="clearfix"></div>
|
|
135
|
+
|
|
136
|
+
<div class="samplebox raised_shadow ">
|
|
137
|
+
<h2>Raised Shadow</h2>
|
|
138
|
+
<table class="code">
|
|
139
|
+
<tbody><tr>
|
|
140
|
+
<td colspan="2">
|
|
141
|
+
Raised Shadow via Box-Shadow .. no other box-shadows possible !
|
|
142
|
+
</td>
|
|
143
|
+
</tr>
|
|
144
|
+
<tr>
|
|
145
|
+
<th>usage</th>
|
|
146
|
+
<td>
|
|
147
|
+
raised_shadow( <span class="vars">color, times, horizontal, vertical, blur, size</span> );
|
|
148
|
+
</td>
|
|
149
|
+
</tr>
|
|
150
|
+
<tr class="options">
|
|
151
|
+
<td colspan="2">
|
|
152
|
+
<table class="options">
|
|
153
|
+
<thead>
|
|
154
|
+
<tr>
|
|
155
|
+
<th class="option">option</th>
|
|
156
|
+
<th class="value">value</th>
|
|
157
|
+
<th class="sample">sample</th>
|
|
158
|
+
<th class="default">default</th>
|
|
159
|
+
<th class="status">optional</th>
|
|
160
|
+
</tr>
|
|
161
|
+
</thead>
|
|
162
|
+
<tbody>
|
|
163
|
+
<tr>
|
|
164
|
+
<th>color</th>
|
|
165
|
+
<td>rgba | hex</td>
|
|
166
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
167
|
+
<td> - </td>
|
|
168
|
+
<td>✘</td>
|
|
169
|
+
</tr>
|
|
170
|
+
<tr>
|
|
171
|
+
<th>times</th>
|
|
172
|
+
<td>number</td>
|
|
173
|
+
<td>1 - 9</td>
|
|
174
|
+
<td>3</td>
|
|
175
|
+
<td>✔</td>
|
|
176
|
+
</tr>
|
|
177
|
+
<tr>
|
|
178
|
+
<th>horizontal</th>
|
|
179
|
+
<td>Pixel</td>
|
|
180
|
+
<td>3px | 0</td>
|
|
181
|
+
<td>0</td>
|
|
182
|
+
<td>✔</td>
|
|
183
|
+
</tr>
|
|
184
|
+
<tr>
|
|
185
|
+
<th>vertical</th>
|
|
186
|
+
<td>Pixel</td>
|
|
187
|
+
<td>3px | 0</td>
|
|
188
|
+
<td>10px</td>
|
|
189
|
+
<td>✔</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<th>blur</th>
|
|
193
|
+
<td>Pixel</td>
|
|
194
|
+
<td>3px | 0</td>
|
|
195
|
+
<td>10px</td>
|
|
196
|
+
<td>✔</td>
|
|
197
|
+
</tr>
|
|
198
|
+
<tr>
|
|
199
|
+
<th>size</th>
|
|
200
|
+
<td>Pixel</td>
|
|
201
|
+
<td>3px | 0</td>
|
|
202
|
+
<td>-10px</td>
|
|
203
|
+
<td>✔</td>
|
|
204
|
+
</tr>
|
|
205
|
+
</tbody>
|
|
206
|
+
</table>
|
|
207
|
+
</td>
|
|
208
|
+
</tr>
|
|
209
|
+
<tr>
|
|
210
|
+
<th>
|
|
211
|
+
this
|
|
212
|
+
</th>
|
|
213
|
+
<td class="code">
|
|
214
|
+
@include raised_shadow( rgba(0, 0, 0, 0.5), 5 );
|
|
215
|
+
</td>
|
|
216
|
+
</tr>
|
|
217
|
+
</tbody></table>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div class="clearfix"></div>
|
|
221
|
+
<br>
|
|
222
|
+
<div class="clearfix"></div>
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
<div class="samplebox raised_shadow one smal">
|
|
228
|
+
<h2>Raised Shadow</h2>
|
|
229
|
+
<p class="warning">@include raised_shadow( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
<div class="samplebox raised_shadow two smal">
|
|
237
|
+
<h2>Raised Shadow</h2>
|
|
238
|
+
<p class="warning">@include raised_shadow( rgba(102, 53, 53, 0.5), 5, -10px, 0 );</p>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
<div class="clearfix"></div>
|
|
244
|
+
<br>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="section">
|
|
251
|
+
<div class="corset top">
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
<div class="box">
|
|
256
|
+
|
|
257
|
+
<div class="head">
|
|
258
|
+
<a name="lifted_shadow">Lifted Shadow</a>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
261
|
+
|
|
262
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
<div class="clearfix"></div>
|
|
266
|
+
|
|
267
|
+
<div class="samplebox lifted_shadow ">
|
|
268
|
+
<h2>Lifted Shadow</h2>
|
|
269
|
+
<table class="code">
|
|
270
|
+
<tbody><tr>
|
|
271
|
+
<td colspan="2">
|
|
272
|
+
Lifted Shadow via :before & :after Pseudo-Elements .. other box-shadows still possible !
|
|
273
|
+
</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<th>usage</th>
|
|
277
|
+
<td>
|
|
278
|
+
lifted_shadow( <span class="vars">color, times, horizontal, vertical, blur, size</span> );
|
|
279
|
+
</td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr class="options">
|
|
282
|
+
<td colspan="2">
|
|
283
|
+
<table class="options">
|
|
284
|
+
<thead>
|
|
285
|
+
<tr>
|
|
286
|
+
<th class="option">option</th>
|
|
287
|
+
<th class="value">value</th>
|
|
288
|
+
<th class="sample">sample</th>
|
|
289
|
+
<th class="default">default</th>
|
|
290
|
+
<th class="status">optional</th>
|
|
291
|
+
</tr>
|
|
292
|
+
</thead>
|
|
293
|
+
<tbody>
|
|
294
|
+
<tr>
|
|
295
|
+
<th>color</th>
|
|
296
|
+
<td>rgba | hex</td>
|
|
297
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
298
|
+
<td> - </td>
|
|
299
|
+
<td>✘</td>
|
|
300
|
+
</tr>
|
|
301
|
+
<tr>
|
|
302
|
+
<th>times</th>
|
|
303
|
+
<td>number</td>
|
|
304
|
+
<td>1 - 9</td>
|
|
305
|
+
<td>3</td>
|
|
306
|
+
<td>✔</td>
|
|
307
|
+
</tr>
|
|
308
|
+
<tr>
|
|
309
|
+
<th>horizontal</th>
|
|
310
|
+
<td>Pixel</td>
|
|
311
|
+
<td>3px | 0</td>
|
|
312
|
+
<td>0</td>
|
|
313
|
+
<td>✔</td>
|
|
314
|
+
</tr>
|
|
315
|
+
<tr>
|
|
316
|
+
<th>vertical</th>
|
|
317
|
+
<td>Pixel</td>
|
|
318
|
+
<td>3px | 0</td>
|
|
319
|
+
<td>15px</td>
|
|
320
|
+
<td>✔</td>
|
|
321
|
+
</tr>
|
|
322
|
+
<tr>
|
|
323
|
+
<th>blur</th>
|
|
324
|
+
<td>Pixel</td>
|
|
325
|
+
<td>3px | 0</td>
|
|
326
|
+
<td>10px</td>
|
|
327
|
+
<td>✔</td>
|
|
328
|
+
</tr>
|
|
329
|
+
<tr>
|
|
330
|
+
<th>size</th>
|
|
331
|
+
<td>Pixel</td>
|
|
332
|
+
<td>3px | 0</td>
|
|
333
|
+
<td>1</td>
|
|
334
|
+
<td>✔</td>
|
|
335
|
+
</tr>
|
|
336
|
+
</tbody>
|
|
337
|
+
</table>
|
|
338
|
+
</td>
|
|
339
|
+
</tr>
|
|
340
|
+
<tr>
|
|
341
|
+
<th>
|
|
342
|
+
this
|
|
343
|
+
</th>
|
|
344
|
+
<td class="code">
|
|
345
|
+
@include lifted_shadow( rgba(0, 0, 0, 0.5), 2 );
|
|
346
|
+
</td>
|
|
347
|
+
</tr>
|
|
348
|
+
</tbody></table>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
<div class="clearfix"></div>
|
|
352
|
+
<br>
|
|
353
|
+
<div class="clearfix"></div>
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
|
|
358
|
+
<div class="samplebox lifted_shadow one smal">
|
|
359
|
+
<h2>Lifted Shadow</h2>
|
|
360
|
+
<p class="warning">@include lifted_shadow( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
361
|
+
</div>
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
<div class="samplebox lifted_shadow two smal">
|
|
368
|
+
<h2>Lifted Shadow</h2>
|
|
369
|
+
<p class="warning">@include lifted_shadow( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
370
|
+
</div>
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
<div class="clearfix"></div>
|
|
375
|
+
<br>
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="section">
|
|
382
|
+
<div class="corset top">
|
|
383
|
+
|
|
384
|
+
|
|
385
|
+
<div class="box">
|
|
386
|
+
|
|
387
|
+
<div class="head">
|
|
388
|
+
<a name="vertical_curves">Vertical Curves</a>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
391
|
+
|
|
392
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
<div class="clearfix"></div>
|
|
396
|
+
|
|
397
|
+
<div class="samplebox vertical_curves ">
|
|
398
|
+
<h2>Vertical Curves</h2>
|
|
399
|
+
<table class="code">
|
|
400
|
+
<tbody><tr>
|
|
401
|
+
<td colspan="2">
|
|
402
|
+
Vertical Curves via :before Pseudo-Elements .. other box-shadows still possible !
|
|
403
|
+
</td>
|
|
404
|
+
</tr>
|
|
405
|
+
<tr>
|
|
406
|
+
<th>usage</th>
|
|
407
|
+
<td>
|
|
408
|
+
vertical_curves( <span class="vars">color, times, horizontal, vertical, blur, size</span> );
|
|
409
|
+
</td>
|
|
410
|
+
</tr>
|
|
411
|
+
<tr class="options">
|
|
412
|
+
<td colspan="2">
|
|
413
|
+
<table class="options">
|
|
414
|
+
<thead>
|
|
415
|
+
<tr>
|
|
416
|
+
<th class="option">option</th>
|
|
417
|
+
<th class="value">value</th>
|
|
418
|
+
<th class="sample">sample</th>
|
|
419
|
+
<th class="default">default</th>
|
|
420
|
+
<th class="status">optional</th>
|
|
421
|
+
</tr>
|
|
422
|
+
</thead>
|
|
423
|
+
<tbody>
|
|
424
|
+
<tr>
|
|
425
|
+
<th>color</th>
|
|
426
|
+
<td>rgba | hex</td>
|
|
427
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
428
|
+
<td> - </td>
|
|
429
|
+
<td>✘</td>
|
|
430
|
+
</tr>
|
|
431
|
+
<tr>
|
|
432
|
+
<th>times</th>
|
|
433
|
+
<td>number</td>
|
|
434
|
+
<td>1 - 9</td>
|
|
435
|
+
<td>3</td>
|
|
436
|
+
<td>✔</td>
|
|
437
|
+
</tr>
|
|
438
|
+
<tr>
|
|
439
|
+
<th>horizontal</th>
|
|
440
|
+
<td>Pixel</td>
|
|
441
|
+
<td>3px | 0</td>
|
|
442
|
+
<td>0</td>
|
|
443
|
+
<td>✔</td>
|
|
444
|
+
</tr>
|
|
445
|
+
<tr>
|
|
446
|
+
<th>vertical</th>
|
|
447
|
+
<td>Pixel</td>
|
|
448
|
+
<td>3px | 0</td>
|
|
449
|
+
<td>0</td>
|
|
450
|
+
<td>✔</td>
|
|
451
|
+
</tr>
|
|
452
|
+
<tr>
|
|
453
|
+
<th>blur</th>
|
|
454
|
+
<td>Pixel</td>
|
|
455
|
+
<td>3px | 0</td>
|
|
456
|
+
<td>15px</td>
|
|
457
|
+
<td>✔</td>
|
|
458
|
+
</tr>
|
|
459
|
+
<tr>
|
|
460
|
+
<th>size</th>
|
|
461
|
+
<td>Pixel</td>
|
|
462
|
+
<td>3px | 0</td>
|
|
463
|
+
<td>0</td>
|
|
464
|
+
<td>✔</td>
|
|
465
|
+
</tr>
|
|
466
|
+
</tbody>
|
|
467
|
+
</table>
|
|
468
|
+
</td>
|
|
469
|
+
</tr>
|
|
470
|
+
<tr>
|
|
471
|
+
<th>
|
|
472
|
+
this
|
|
473
|
+
</th>
|
|
474
|
+
<td class="code">
|
|
475
|
+
@include vertical_curves( rgba(0, 0, 0, 0.42), 3 );
|
|
476
|
+
</td>
|
|
477
|
+
</tr>
|
|
478
|
+
</tbody></table>
|
|
479
|
+
</div>
|
|
480
|
+
|
|
481
|
+
<div class="clearfix"></div>
|
|
482
|
+
<br>
|
|
483
|
+
<div class="clearfix"></div>
|
|
484
|
+
|
|
485
|
+
|
|
486
|
+
|
|
487
|
+
|
|
488
|
+
<div class="samplebox vertical_curves one smal">
|
|
489
|
+
<h2>Vertical Curves</h2>
|
|
490
|
+
<p class="warning">@include vertical_curves( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
491
|
+
</div>
|
|
492
|
+
|
|
493
|
+
|
|
494
|
+
|
|
495
|
+
|
|
496
|
+
|
|
497
|
+
<div class="samplebox vertical_curves two smal">
|
|
498
|
+
<h2>Vertical Curves</h2>
|
|
499
|
+
<p class="warning">@include vertical_curves( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
|
|
503
|
+
|
|
504
|
+
<div class="clearfix"></div>
|
|
505
|
+
<br>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
<div class="section">
|
|
512
|
+
<div class="corset top">
|
|
513
|
+
|
|
514
|
+
|
|
515
|
+
<div class="box">
|
|
516
|
+
|
|
517
|
+
<div class="head">
|
|
518
|
+
<a name="horizontal_curves">Horizontal Curves</a>
|
|
519
|
+
</div>
|
|
520
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
521
|
+
|
|
522
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
523
|
+
|
|
524
|
+
|
|
525
|
+
<div class="clearfix"></div>
|
|
526
|
+
|
|
527
|
+
<div class="samplebox horizontal_curves ">
|
|
528
|
+
<h2>Horizontal Curves</h2>
|
|
529
|
+
<table class="code">
|
|
530
|
+
<tbody><tr>
|
|
531
|
+
<td colspan="2">
|
|
532
|
+
Horizontal Curves via :before Pseudo-Elements .. other box-shadows still possible !
|
|
533
|
+
</td>
|
|
534
|
+
</tr>
|
|
535
|
+
<tr>
|
|
536
|
+
<th>usage</th>
|
|
537
|
+
<td>
|
|
538
|
+
horizontal_curves( <span class="vars">color, times, horizontal, vertical, blur, size</span> );
|
|
539
|
+
</td>
|
|
540
|
+
</tr>
|
|
541
|
+
<tr class="options">
|
|
542
|
+
<td colspan="2">
|
|
543
|
+
<table class="options">
|
|
544
|
+
<thead>
|
|
545
|
+
<tr>
|
|
546
|
+
<th class="option">option</th>
|
|
547
|
+
<th class="value">value</th>
|
|
548
|
+
<th class="sample">sample</th>
|
|
549
|
+
<th class="default">default</th>
|
|
550
|
+
<th class="status">optional</th>
|
|
551
|
+
</tr>
|
|
552
|
+
</thead>
|
|
553
|
+
<tbody>
|
|
554
|
+
<tr>
|
|
555
|
+
<th>color</th>
|
|
556
|
+
<td>rgba | hex</td>
|
|
557
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
558
|
+
<td> - </td>
|
|
559
|
+
<td>✘</td>
|
|
560
|
+
</tr>
|
|
561
|
+
<tr>
|
|
562
|
+
<th>times</th>
|
|
563
|
+
<td>number</td>
|
|
564
|
+
<td>1 - 9</td>
|
|
565
|
+
<td>3</td>
|
|
566
|
+
<td>✔</td>
|
|
567
|
+
</tr>
|
|
568
|
+
<tr>
|
|
569
|
+
<th>horizontal</th>
|
|
570
|
+
<td>Pixel</td>
|
|
571
|
+
<td>3px | 0</td>
|
|
572
|
+
<td>0</td>
|
|
573
|
+
<td>✔</td>
|
|
574
|
+
</tr>
|
|
575
|
+
<tr>
|
|
576
|
+
<th>vertical</th>
|
|
577
|
+
<td>Pixel</td>
|
|
578
|
+
<td>3px | 0</td>
|
|
579
|
+
<td>0</td>
|
|
580
|
+
<td>✔</td>
|
|
581
|
+
</tr>
|
|
582
|
+
<tr>
|
|
583
|
+
<th>blur</th>
|
|
584
|
+
<td>Pixel</td>
|
|
585
|
+
<td>3px | 0</td>
|
|
586
|
+
<td>15px</td>
|
|
587
|
+
<td>✔</td>
|
|
588
|
+
</tr>
|
|
589
|
+
<tr>
|
|
590
|
+
<th>size</th>
|
|
591
|
+
<td>Pixel</td>
|
|
592
|
+
<td>3px | 0</td>
|
|
593
|
+
<td>0</td>
|
|
594
|
+
<td>✔</td>
|
|
595
|
+
</tr>
|
|
596
|
+
</tbody>
|
|
597
|
+
</table>
|
|
598
|
+
</td>
|
|
599
|
+
</tr>
|
|
600
|
+
<tr>
|
|
601
|
+
<th>
|
|
602
|
+
this
|
|
603
|
+
</th>
|
|
604
|
+
<td class="code">
|
|
605
|
+
@include horizontal_curves( rgba(0, 0, 0, 0.42), 3 );
|
|
606
|
+
</td>
|
|
607
|
+
</tr>
|
|
608
|
+
</tbody></table>
|
|
609
|
+
</div>
|
|
610
|
+
|
|
611
|
+
<div class="clearfix"></div>
|
|
612
|
+
<br>
|
|
613
|
+
<div class="clearfix"></div>
|
|
614
|
+
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
|
|
618
|
+
<div class="samplebox horizontal_curves one smal">
|
|
619
|
+
<h2>Horizontal Curves</h2>
|
|
620
|
+
<p class="warning">@include horizontal_curves( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
621
|
+
</div>
|
|
622
|
+
|
|
623
|
+
|
|
624
|
+
|
|
625
|
+
|
|
626
|
+
|
|
627
|
+
<div class="samplebox horizontal_curves two smal">
|
|
628
|
+
<h2>Horizontal Curves</h2>
|
|
629
|
+
<p class="warning">@include horizontal_curves( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
630
|
+
</div>
|
|
631
|
+
|
|
632
|
+
|
|
633
|
+
|
|
634
|
+
<div class="clearfix"></div>
|
|
635
|
+
<br>
|
|
636
|
+
</div>
|
|
637
|
+
</div>
|
|
638
|
+
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
<div class="section">
|
|
642
|
+
<div class="corset top">
|
|
643
|
+
|
|
644
|
+
|
|
645
|
+
<div class="box">
|
|
646
|
+
|
|
647
|
+
<div class="head">
|
|
648
|
+
<a name="vertical_shine">Vertical Shine</a>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
651
|
+
|
|
652
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
653
|
+
|
|
654
|
+
|
|
655
|
+
<div class="clearfix"></div>
|
|
656
|
+
|
|
657
|
+
<div class="samplebox vertical_shine ">
|
|
658
|
+
<h2>Vertical Shine</h2>
|
|
659
|
+
<table class="code">
|
|
660
|
+
<tbody><tr>
|
|
661
|
+
<td colspan="2">
|
|
662
|
+
Vertical Shine via :before & :after Pseudo-Elements .. other box-shadows still possible !
|
|
663
|
+
</td>
|
|
664
|
+
</tr>
|
|
665
|
+
<tr>
|
|
666
|
+
<th>usage</th>
|
|
667
|
+
<td>
|
|
668
|
+
vertical_shine( <span class="vars">color, times, width, blur, size</span> );
|
|
669
|
+
</td>
|
|
670
|
+
</tr>
|
|
671
|
+
<tr class="options">
|
|
672
|
+
<td colspan="2">
|
|
673
|
+
<table class="options">
|
|
674
|
+
<thead>
|
|
675
|
+
<tr>
|
|
676
|
+
<th class="option">option</th>
|
|
677
|
+
<th class="value">value</th>
|
|
678
|
+
<th class="sample">sample</th>
|
|
679
|
+
<th class="default">default</th>
|
|
680
|
+
<th class="status">optional</th>
|
|
681
|
+
</tr>
|
|
682
|
+
</thead>
|
|
683
|
+
<tbody>
|
|
684
|
+
<tr>
|
|
685
|
+
<th>color</th>
|
|
686
|
+
<td>rgba | hex</td>
|
|
687
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
688
|
+
<td> - </td>
|
|
689
|
+
<td>✘</td>
|
|
690
|
+
</tr>
|
|
691
|
+
<tr>
|
|
692
|
+
<th>times</th>
|
|
693
|
+
<td>number</td>
|
|
694
|
+
<td>1 - 9</td>
|
|
695
|
+
<td>1</td>
|
|
696
|
+
<td>✔</td>
|
|
697
|
+
</tr>
|
|
698
|
+
<tr>
|
|
699
|
+
<th>width</th>
|
|
700
|
+
<td>Pixel</td>
|
|
701
|
+
<td>3px | 0</td>
|
|
702
|
+
<td>3px</td>
|
|
703
|
+
<td>✔</td>
|
|
704
|
+
</tr>
|
|
705
|
+
<tr>
|
|
706
|
+
<th>blur</th>
|
|
707
|
+
<td>Pixel</td>
|
|
708
|
+
<td>3px | 0</td>
|
|
709
|
+
<td>10px</td>
|
|
710
|
+
<td>✔</td>
|
|
711
|
+
</tr>
|
|
712
|
+
<tr>
|
|
713
|
+
<th>size</th>
|
|
714
|
+
<td>Pixel</td>
|
|
715
|
+
<td>3px | 0</td>
|
|
716
|
+
<td>0</td>
|
|
717
|
+
<td>✔</td>
|
|
718
|
+
</tr>
|
|
719
|
+
</tbody>
|
|
720
|
+
</table>
|
|
721
|
+
</td>
|
|
722
|
+
</tr>
|
|
723
|
+
<tr>
|
|
724
|
+
<th>
|
|
725
|
+
this
|
|
726
|
+
</th>
|
|
727
|
+
<td class="code">
|
|
728
|
+
@include vertical_shine( rgba(0, 0, 0, 0.3), 2 );
|
|
729
|
+
</td>
|
|
730
|
+
</tr>
|
|
731
|
+
</tbody></table>
|
|
732
|
+
</div>
|
|
733
|
+
|
|
734
|
+
<div class="clearfix"></div>
|
|
735
|
+
<br>
|
|
736
|
+
<div class="clearfix"></div>
|
|
737
|
+
|
|
738
|
+
|
|
739
|
+
|
|
740
|
+
|
|
741
|
+
<div class="samplebox vertical_shine one smal">
|
|
742
|
+
<h2>Vertical Shine</h2>
|
|
743
|
+
<p class="warning">@include vertical_shine( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
744
|
+
</div>
|
|
745
|
+
|
|
746
|
+
|
|
747
|
+
|
|
748
|
+
|
|
749
|
+
|
|
750
|
+
<div class="samplebox vertical_shine two smal">
|
|
751
|
+
<h2>Vertical Shine</h2>
|
|
752
|
+
<p class="warning">@include vertical_shine( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
753
|
+
</div>
|
|
754
|
+
|
|
755
|
+
|
|
756
|
+
|
|
757
|
+
<div class="clearfix"></div>
|
|
758
|
+
<br>
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
|
|
762
|
+
</div>
|
|
763
|
+
</div>
|
|
764
|
+
<div class="section">
|
|
765
|
+
<div class="corset top">
|
|
766
|
+
|
|
767
|
+
|
|
768
|
+
<div class="box">
|
|
769
|
+
|
|
770
|
+
<div class="head">
|
|
771
|
+
<a name="horizontal_shine">Horizontal Shine</a>
|
|
772
|
+
</div>
|
|
773
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
774
|
+
|
|
775
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
776
|
+
|
|
777
|
+
|
|
778
|
+
<div class="clearfix"></div>
|
|
779
|
+
|
|
780
|
+
<div class="samplebox horizontal_shine ">
|
|
781
|
+
<h2>Horizontal Shine</h2>
|
|
782
|
+
<table class="code">
|
|
783
|
+
<tbody><tr>
|
|
784
|
+
<td colspan="2">
|
|
785
|
+
Horizontal Shine via :before & :after Pseudo-Elements .. other box-shadows still possible !
|
|
786
|
+
</td>
|
|
787
|
+
</tr>
|
|
788
|
+
<tr>
|
|
789
|
+
<th>usage</th>
|
|
790
|
+
<td>
|
|
791
|
+
horizontal_shine( <span class="vars">color, times, width, blur, size</span> );
|
|
792
|
+
</td>
|
|
793
|
+
</tr>
|
|
794
|
+
<tr class="options">
|
|
795
|
+
<td colspan="2">
|
|
796
|
+
<table class="options">
|
|
797
|
+
<thead>
|
|
798
|
+
<tr>
|
|
799
|
+
<th class="option">option</th>
|
|
800
|
+
<th class="value">value</th>
|
|
801
|
+
<th class="sample">sample</th>
|
|
802
|
+
<th class="default">default</th>
|
|
803
|
+
<th class="status">optional</th>
|
|
804
|
+
</tr>
|
|
805
|
+
</thead>
|
|
806
|
+
<tbody>
|
|
807
|
+
<tr>
|
|
808
|
+
<th>color</th>
|
|
809
|
+
<td>rgba | hex</td>
|
|
810
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
811
|
+
<td> - </td>
|
|
812
|
+
<td>✘</td>
|
|
813
|
+
</tr>
|
|
814
|
+
<tr>
|
|
815
|
+
<th>times</th>
|
|
816
|
+
<td>number</td>
|
|
817
|
+
<td>1 - 9</td>
|
|
818
|
+
<td>1</td>
|
|
819
|
+
<td>✔</td>
|
|
820
|
+
</tr>
|
|
821
|
+
<tr>
|
|
822
|
+
<th>width</th>
|
|
823
|
+
<td>Pixel</td>
|
|
824
|
+
<td>3px | 0</td>
|
|
825
|
+
<td>3px</td>
|
|
826
|
+
<td>✔</td>
|
|
827
|
+
</tr>
|
|
828
|
+
<tr>
|
|
829
|
+
<th>blur</th>
|
|
830
|
+
<td>Pixel</td>
|
|
831
|
+
<td>3px | 0</td>
|
|
832
|
+
<td>10px</td>
|
|
833
|
+
<td>✔</td>
|
|
834
|
+
</tr>
|
|
835
|
+
<tr>
|
|
836
|
+
<th>size</th>
|
|
837
|
+
<td>Pixel</td>
|
|
838
|
+
<td>3px | 0</td>
|
|
839
|
+
<td>0</td>
|
|
840
|
+
<td>✔</td>
|
|
841
|
+
</tr>
|
|
842
|
+
</tbody>
|
|
843
|
+
</table>
|
|
844
|
+
</td>
|
|
845
|
+
</tr>
|
|
846
|
+
<tr>
|
|
847
|
+
<th>
|
|
848
|
+
this
|
|
849
|
+
</th>
|
|
850
|
+
<td class="code">
|
|
851
|
+
@include horizontal_shine( rgba(0, 0, 0, 0.3), 2 );
|
|
852
|
+
</td>
|
|
853
|
+
</tr>
|
|
854
|
+
</tbody></table>
|
|
855
|
+
</div>
|
|
856
|
+
|
|
857
|
+
<div class="clearfix"></div>
|
|
858
|
+
<br>
|
|
859
|
+
<div class="clearfix"></div>
|
|
860
|
+
|
|
861
|
+
|
|
862
|
+
|
|
863
|
+
|
|
864
|
+
<div class="samplebox horizontal_shine one smal">
|
|
865
|
+
<h2>Horizontal Shine</h2>
|
|
866
|
+
<p class="warning">@include horizontal_shine( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
867
|
+
</div>
|
|
868
|
+
|
|
869
|
+
|
|
870
|
+
|
|
871
|
+
|
|
872
|
+
|
|
873
|
+
<div class="samplebox horizontal_shine two smal">
|
|
874
|
+
<h2>Horizontal Shine</h2>
|
|
875
|
+
<p class="warning">@include horizontal_shine( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
876
|
+
</div>
|
|
877
|
+
|
|
878
|
+
|
|
879
|
+
|
|
880
|
+
<div class="clearfix"></div>
|
|
881
|
+
<br>
|
|
882
|
+
</div>
|
|
883
|
+
</div>
|
|
884
|
+
|
|
885
|
+
</div>
|
|
886
|
+
</div>
|
|
887
|
+
<div class="section">
|
|
888
|
+
<div class="corset top">
|
|
889
|
+
|
|
890
|
+
|
|
891
|
+
<div class="box">
|
|
892
|
+
|
|
893
|
+
<div class="head">
|
|
894
|
+
<a name="single_curve">Single Curve</a>
|
|
895
|
+
</div>
|
|
896
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
897
|
+
|
|
898
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
899
|
+
|
|
900
|
+
|
|
901
|
+
<div class="clearfix"></div>
|
|
902
|
+
|
|
903
|
+
<div class="samplebox single_curve ">
|
|
904
|
+
<h2>Single Curve</h2>
|
|
905
|
+
<table class="code">
|
|
906
|
+
<tbody><tr>
|
|
907
|
+
<td colspan="2">
|
|
908
|
+
Single Curve via :before Pseudo-Elements .. other box-shadows still possible !
|
|
909
|
+
</td>
|
|
910
|
+
</tr>
|
|
911
|
+
<tr>
|
|
912
|
+
<th>usage</th>
|
|
913
|
+
<td>
|
|
914
|
+
single_curve( <span class="vars">color, times, position, width, blur, size, corner</span> );
|
|
915
|
+
</td>
|
|
916
|
+
</tr>
|
|
917
|
+
<tr class="options">
|
|
918
|
+
<td colspan="2">
|
|
919
|
+
<table class="options">
|
|
920
|
+
<thead>
|
|
921
|
+
<tr>
|
|
922
|
+
<th class="option">option</th>
|
|
923
|
+
<th class="value">value</th>
|
|
924
|
+
<th class="sample">sample</th>
|
|
925
|
+
<th class="default">default</th>
|
|
926
|
+
<th class="status">optional</th>
|
|
927
|
+
</tr>
|
|
928
|
+
</thead>
|
|
929
|
+
<tbody>
|
|
930
|
+
<tr>
|
|
931
|
+
<th>color</th>
|
|
932
|
+
<td>rgba | hex</td>
|
|
933
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
934
|
+
<td> - </td>
|
|
935
|
+
<td>✘</td>
|
|
936
|
+
</tr>
|
|
937
|
+
<tr>
|
|
938
|
+
<th>times</th>
|
|
939
|
+
<td>number</td>
|
|
940
|
+
<td>1 - 9</td>
|
|
941
|
+
<td>1</td>
|
|
942
|
+
<td>✔</td>
|
|
943
|
+
</tr>
|
|
944
|
+
<tr>
|
|
945
|
+
<th>position</th>
|
|
946
|
+
<td>position</td>
|
|
947
|
+
<td>top | left</td>
|
|
948
|
+
<td>left</td>
|
|
949
|
+
<td>✔</td>
|
|
950
|
+
</tr>
|
|
951
|
+
<tr>
|
|
952
|
+
<th>width</th>
|
|
953
|
+
<td>Pixel</td>
|
|
954
|
+
<td>3px | 0</td>
|
|
955
|
+
<td>5px</td>
|
|
956
|
+
<td>✔</td>
|
|
957
|
+
</tr>
|
|
958
|
+
<tr>
|
|
959
|
+
<th>blur</th>
|
|
960
|
+
<td>Pixel</td>
|
|
961
|
+
<td>3px | 0</td>
|
|
962
|
+
<td>10px</td>
|
|
963
|
+
<td>✔</td>
|
|
964
|
+
</tr>
|
|
965
|
+
<tr>
|
|
966
|
+
<th>size</th>
|
|
967
|
+
<td>Pixel</td>
|
|
968
|
+
<td>3px | 0</td>
|
|
969
|
+
<td>0</td>
|
|
970
|
+
<td>✔</td>
|
|
971
|
+
</tr>
|
|
972
|
+
<tr>
|
|
973
|
+
<th>corner</th>
|
|
974
|
+
<td>number</td>
|
|
975
|
+
<td>50 | 100</td>
|
|
976
|
+
<td>50</td>
|
|
977
|
+
<td>✔</td>
|
|
978
|
+
</tr>
|
|
979
|
+
</tbody>
|
|
980
|
+
</table>
|
|
981
|
+
</td>
|
|
982
|
+
</tr>
|
|
983
|
+
<tr>
|
|
984
|
+
<th>
|
|
985
|
+
this
|
|
986
|
+
</th>
|
|
987
|
+
<td class="code">
|
|
988
|
+
@include single_curve( rgba(0, 0, 0, 0.5), 2 );
|
|
989
|
+
</td>
|
|
990
|
+
</tr>
|
|
991
|
+
</tbody></table>
|
|
992
|
+
</div>
|
|
993
|
+
|
|
994
|
+
<div class="clearfix"></div>
|
|
995
|
+
<br>
|
|
996
|
+
<div class="clearfix"></div>
|
|
997
|
+
|
|
998
|
+
|
|
999
|
+
|
|
1000
|
+
|
|
1001
|
+
<div class="samplebox single_curve one smal">
|
|
1002
|
+
<h2>Single Curve</h2>
|
|
1003
|
+
<p class="warning">@include single_curve( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
1004
|
+
</div>
|
|
1005
|
+
|
|
1006
|
+
|
|
1007
|
+
|
|
1008
|
+
|
|
1009
|
+
|
|
1010
|
+
<div class="samplebox single_curve two smal">
|
|
1011
|
+
<h2>Single Curve</h2>
|
|
1012
|
+
<p class="warning">@include single_curve( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
1013
|
+
</div>
|
|
1014
|
+
|
|
1015
|
+
|
|
1016
|
+
|
|
1017
|
+
<div class="clearfix"></div>
|
|
1018
|
+
<br>
|
|
1019
|
+
</div>
|
|
1020
|
+
</div>
|
|
1021
|
+
|
|
1022
|
+
</div>
|
|
1023
|
+
</div>
|
|
1024
|
+
<div class="section">
|
|
1025
|
+
<div class="corset top">
|
|
1026
|
+
|
|
1027
|
+
|
|
1028
|
+
<div class="box">
|
|
1029
|
+
|
|
1030
|
+
<div class="head">
|
|
1031
|
+
<a name="single_shine">Single Shine</a>
|
|
1032
|
+
</div>
|
|
1033
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
1034
|
+
|
|
1035
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
1036
|
+
|
|
1037
|
+
|
|
1038
|
+
<div class="clearfix"></div>
|
|
1039
|
+
|
|
1040
|
+
<div class="samplebox single_shine ">
|
|
1041
|
+
<h2>Single Shine</h2>
|
|
1042
|
+
<table class="code">
|
|
1043
|
+
<tbody><tr>
|
|
1044
|
+
<td colspan="2">
|
|
1045
|
+
Single Shine via :before Pseudo-Elements .. other box-shadows still possible !
|
|
1046
|
+
</td>
|
|
1047
|
+
</tr>
|
|
1048
|
+
<tr>
|
|
1049
|
+
<th>usage</th>
|
|
1050
|
+
<td>
|
|
1051
|
+
single_shine( <span class="vars">color, times, position, width, blur, size, corner</span> );
|
|
1052
|
+
</td>
|
|
1053
|
+
</tr>
|
|
1054
|
+
<tr class="options">
|
|
1055
|
+
<td colspan="2">
|
|
1056
|
+
<table class="options">
|
|
1057
|
+
<thead>
|
|
1058
|
+
<tr>
|
|
1059
|
+
<th class="option">option</th>
|
|
1060
|
+
<th class="value">value</th>
|
|
1061
|
+
<th class="sample">sample</th>
|
|
1062
|
+
<th class="default">default</th>
|
|
1063
|
+
<th class="status">optional</th>
|
|
1064
|
+
</tr>
|
|
1065
|
+
</thead>
|
|
1066
|
+
<tbody>
|
|
1067
|
+
<tr>
|
|
1068
|
+
<th>color</th>
|
|
1069
|
+
<td>rgba | hex</td>
|
|
1070
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
1071
|
+
<td> - </td>
|
|
1072
|
+
<td>✘</td>
|
|
1073
|
+
</tr>
|
|
1074
|
+
<tr>
|
|
1075
|
+
<th>times</th>
|
|
1076
|
+
<td>number</td>
|
|
1077
|
+
<td>1 - 9</td>
|
|
1078
|
+
<td>1</td>
|
|
1079
|
+
<td>✔</td>
|
|
1080
|
+
</tr>
|
|
1081
|
+
<tr>
|
|
1082
|
+
<th>position</th>
|
|
1083
|
+
<td>position</td>
|
|
1084
|
+
<td>top | left</td>
|
|
1085
|
+
<td>right</td>
|
|
1086
|
+
<td>✔</td>
|
|
1087
|
+
</tr>
|
|
1088
|
+
<tr>
|
|
1089
|
+
<th>width</th>
|
|
1090
|
+
<td>Pixel</td>
|
|
1091
|
+
<td>3px | 0</td>
|
|
1092
|
+
<td>5px</td>
|
|
1093
|
+
<td>✔</td>
|
|
1094
|
+
</tr>
|
|
1095
|
+
<tr>
|
|
1096
|
+
<th>blur</th>
|
|
1097
|
+
<td>Pixel</td>
|
|
1098
|
+
<td>3px | 0</td>
|
|
1099
|
+
<td>10px</td>
|
|
1100
|
+
<td>✔</td>
|
|
1101
|
+
</tr>
|
|
1102
|
+
<tr>
|
|
1103
|
+
<th>size</th>
|
|
1104
|
+
<td>Pixel</td>
|
|
1105
|
+
<td>3px | 0</td>
|
|
1106
|
+
<td>0</td>
|
|
1107
|
+
<td>✔</td>
|
|
1108
|
+
</tr>
|
|
1109
|
+
<tr>
|
|
1110
|
+
<th>corner</th>
|
|
1111
|
+
<td>number</td>
|
|
1112
|
+
<td>50 | 100</td>
|
|
1113
|
+
<td>50</td>
|
|
1114
|
+
<td>✔</td>
|
|
1115
|
+
</tr>
|
|
1116
|
+
</tbody>
|
|
1117
|
+
</table>
|
|
1118
|
+
</td>
|
|
1119
|
+
</tr>
|
|
1120
|
+
<tr>
|
|
1121
|
+
<th>
|
|
1122
|
+
this
|
|
1123
|
+
</th>
|
|
1124
|
+
<td class="code">
|
|
1125
|
+
@include single_shine( rgba(0, 0, 0, 0.5), 2 );
|
|
1126
|
+
</td>
|
|
1127
|
+
</tr>
|
|
1128
|
+
</tbody></table>
|
|
1129
|
+
</div>
|
|
1130
|
+
|
|
1131
|
+
<div class="clearfix"></div>
|
|
1132
|
+
<br>
|
|
1133
|
+
<div class="clearfix"></div>
|
|
1134
|
+
|
|
1135
|
+
|
|
1136
|
+
|
|
1137
|
+
|
|
1138
|
+
<div class="samplebox single_shine one smal">
|
|
1139
|
+
<h2>Single Shine</h2>
|
|
1140
|
+
<p class="warning">@include single_shine( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
1141
|
+
</div>
|
|
1142
|
+
|
|
1143
|
+
|
|
1144
|
+
|
|
1145
|
+
|
|
1146
|
+
|
|
1147
|
+
<div class="samplebox single_shine two smal">
|
|
1148
|
+
<h2>Single Shine</h2>
|
|
1149
|
+
<p class="warning">@include single_shine( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
1150
|
+
</div>
|
|
1151
|
+
|
|
1152
|
+
|
|
1153
|
+
|
|
1154
|
+
<div class="clearfix"></div>
|
|
1155
|
+
<br>
|
|
1156
|
+
</div>
|
|
1157
|
+
</div>
|
|
1158
|
+
|
|
1159
|
+
</div>
|
|
1160
|
+
</div>
|
|
1161
|
+
<div class="section">
|
|
1162
|
+
<div class="corset top">
|
|
1163
|
+
|
|
1164
|
+
|
|
1165
|
+
<div class="box">
|
|
1166
|
+
|
|
1167
|
+
<div class="head">
|
|
1168
|
+
<a name="paper_shadow">Paper Shadow</a>
|
|
1169
|
+
</div>
|
|
1170
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
1171
|
+
|
|
1172
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
1173
|
+
|
|
1174
|
+
|
|
1175
|
+
<div class="clearfix"></div>
|
|
1176
|
+
|
|
1177
|
+
<div class="samplebox paper_shadow ">
|
|
1178
|
+
<h2>Paper Shadow</h2>
|
|
1179
|
+
<table class="code">
|
|
1180
|
+
<tbody><tr>
|
|
1181
|
+
<td colspan="2">
|
|
1182
|
+
Paper Shadow via :before Pseudo-Elements .. other box-shadows still possible !
|
|
1183
|
+
</td>
|
|
1184
|
+
</tr>
|
|
1185
|
+
<tr>
|
|
1186
|
+
<th>usage</th>
|
|
1187
|
+
<td>
|
|
1188
|
+
paper_shadow( <span class="vars">color, times</span> );
|
|
1189
|
+
</td>
|
|
1190
|
+
</tr>
|
|
1191
|
+
<tr class="options">
|
|
1192
|
+
<td colspan="2">
|
|
1193
|
+
<table class="options">
|
|
1194
|
+
<thead>
|
|
1195
|
+
<tr>
|
|
1196
|
+
<th class="option">option</th>
|
|
1197
|
+
<th class="value">value</th>
|
|
1198
|
+
<th class="sample">sample</th>
|
|
1199
|
+
<th class="default">default</th>
|
|
1200
|
+
<th class="status">optional</th>
|
|
1201
|
+
</tr>
|
|
1202
|
+
</thead>
|
|
1203
|
+
<tbody>
|
|
1204
|
+
<tr>
|
|
1205
|
+
<th>color</th>
|
|
1206
|
+
<td>rgba | hex</td>
|
|
1207
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
1208
|
+
<td> - </td>
|
|
1209
|
+
<td>✘</td>
|
|
1210
|
+
</tr>
|
|
1211
|
+
<tr>
|
|
1212
|
+
<th>times</th>
|
|
1213
|
+
<td>number</td>
|
|
1214
|
+
<td>1 - 9</td>
|
|
1215
|
+
<td>1</td>
|
|
1216
|
+
<td>✔</td>
|
|
1217
|
+
</tr>
|
|
1218
|
+
</tbody>
|
|
1219
|
+
</table>
|
|
1220
|
+
</td>
|
|
1221
|
+
</tr>
|
|
1222
|
+
<tr>
|
|
1223
|
+
<th>
|
|
1224
|
+
this
|
|
1225
|
+
</th>
|
|
1226
|
+
<td class="code">
|
|
1227
|
+
@include paper_shadow( rgba(0, 0, 0, 0.5), 2 );
|
|
1228
|
+
</td>
|
|
1229
|
+
</tr>
|
|
1230
|
+
</tbody></table>
|
|
1231
|
+
</div>
|
|
1232
|
+
|
|
1233
|
+
<div class="clearfix"></div>
|
|
1234
|
+
<br>
|
|
1235
|
+
<div class="clearfix"></div>
|
|
1236
|
+
|
|
1237
|
+
|
|
1238
|
+
|
|
1239
|
+
|
|
1240
|
+
<div class="samplebox paper_shadow one smal">
|
|
1241
|
+
<h2>Paper Shadow</h2>
|
|
1242
|
+
<p class="warning">@include paper_shadow( rgba(102, 53, 53, 0.5), 5 );</p>
|
|
1243
|
+
</div>
|
|
1244
|
+
|
|
1245
|
+
|
|
1246
|
+
|
|
1247
|
+
|
|
1248
|
+
|
|
1249
|
+
<div class="samplebox paper_shadow two smal">
|
|
1250
|
+
<h2>Paper Shadow</h2>
|
|
1251
|
+
<p class="warning">@include paper_shadow( rgba(204, 0, 0, 0.5), 2 );</p>
|
|
1252
|
+
</div>
|
|
1253
|
+
|
|
1254
|
+
|
|
1255
|
+
|
|
1256
|
+
<div class="clearfix"></div>
|
|
1257
|
+
<br>
|
|
1258
|
+
</div>
|
|
1259
|
+
</div>
|
|
1260
|
+
|
|
1261
|
+
</div>
|
|
1262
|
+
</div>
|
|
1263
|
+
<div class="section">
|
|
1264
|
+
<div class="corset top">
|
|
1265
|
+
|
|
1266
|
+
|
|
1267
|
+
|
|
1268
|
+
<div class="box">
|
|
1269
|
+
|
|
1270
|
+
<div class="head">
|
|
1271
|
+
<a name="pseudo_raised_shadow">Pseudo Raised Shadow</a>
|
|
1272
|
+
</div>
|
|
1273
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
1274
|
+
|
|
1275
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
1276
|
+
|
|
1277
|
+
|
|
1278
|
+
<div class="clearfix"></div>
|
|
1279
|
+
|
|
1280
|
+
<div class="samplebox pseudo_raised_shadow ">
|
|
1281
|
+
<h2>Pseudo Raised Shadow</h2>
|
|
1282
|
+
<table class="code">
|
|
1283
|
+
<tbody><tr>
|
|
1284
|
+
<td colspan="2">
|
|
1285
|
+
Pseudo Raised Shadow via :before Pseudo-Elements .. other box-shadows still possible !
|
|
1286
|
+
</td>
|
|
1287
|
+
</tr>
|
|
1288
|
+
<tr>
|
|
1289
|
+
<th>usage</th>
|
|
1290
|
+
<td>
|
|
1291
|
+
pseudo_raised_shadow( <span class="vars">color, times, gap, radius, horizontal, vertical, blur, size</span> );
|
|
1292
|
+
</td>
|
|
1293
|
+
</tr>
|
|
1294
|
+
<tr class="options">
|
|
1295
|
+
<td colspan="2">
|
|
1296
|
+
<table class="options">
|
|
1297
|
+
<thead>
|
|
1298
|
+
<tr>
|
|
1299
|
+
<th class="option">option</th>
|
|
1300
|
+
<th class="value">value</th>
|
|
1301
|
+
<th class="sample">sample</th>
|
|
1302
|
+
<th class="default">default</th>
|
|
1303
|
+
<th class="status">optional</th>
|
|
1304
|
+
</tr>
|
|
1305
|
+
</thead>
|
|
1306
|
+
<tbody>
|
|
1307
|
+
<tr>
|
|
1308
|
+
<th>color</th>
|
|
1309
|
+
<td>rgba | hex</td>
|
|
1310
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
1311
|
+
<td> - </td>
|
|
1312
|
+
<td>✘</td>
|
|
1313
|
+
</tr>
|
|
1314
|
+
<tr>
|
|
1315
|
+
<th>times</th>
|
|
1316
|
+
<td>number</td>
|
|
1317
|
+
<td>1 - 9</td>
|
|
1318
|
+
<td>3</td>
|
|
1319
|
+
<td>✔</td>
|
|
1320
|
+
</tr>
|
|
1321
|
+
<tr>
|
|
1322
|
+
<th>gap</th>
|
|
1323
|
+
<td>Pixel</td>
|
|
1324
|
+
<td>3px | 0</td>
|
|
1325
|
+
<td>10px</td>
|
|
1326
|
+
<td>✔</td>
|
|
1327
|
+
</tr>
|
|
1328
|
+
<tr>
|
|
1329
|
+
<th>radius</th>
|
|
1330
|
+
<td>Pixel</td>
|
|
1331
|
+
<td>3px | 0</td>
|
|
1332
|
+
<td>3px</td>
|
|
1333
|
+
<td>✔</td>
|
|
1334
|
+
</tr>
|
|
1335
|
+
<tr>
|
|
1336
|
+
<th>horizontal</th>
|
|
1337
|
+
<td>Pixel</td>
|
|
1338
|
+
<td>3px | 0</td>
|
|
1339
|
+
<td>0</td>
|
|
1340
|
+
<td>✔</td>
|
|
1341
|
+
</tr>
|
|
1342
|
+
<tr>
|
|
1343
|
+
<th>vertical</th>
|
|
1344
|
+
<td>Pixel</td>
|
|
1345
|
+
<td>3px | 0</td>
|
|
1346
|
+
<td>5px</td>
|
|
1347
|
+
<td>✔</td>
|
|
1348
|
+
</tr>
|
|
1349
|
+
<tr>
|
|
1350
|
+
<th>blur</th>
|
|
1351
|
+
<td>Pixel</td>
|
|
1352
|
+
<td>3px | 0</td>
|
|
1353
|
+
<td>5px</td>
|
|
1354
|
+
<td>✔</td>
|
|
1355
|
+
</tr>
|
|
1356
|
+
<tr>
|
|
1357
|
+
<th>size</th>
|
|
1358
|
+
<td>Pixel</td>
|
|
1359
|
+
<td>3px | 0</td>
|
|
1360
|
+
<td>0</td>
|
|
1361
|
+
<td>✔</td>
|
|
1362
|
+
</tr>
|
|
1363
|
+
</tbody>
|
|
1364
|
+
</table>
|
|
1365
|
+
</td>
|
|
1366
|
+
</tr>
|
|
1367
|
+
<tr>
|
|
1368
|
+
<th>
|
|
1369
|
+
this
|
|
1370
|
+
</th>
|
|
1371
|
+
<td class="code">
|
|
1372
|
+
@include paper_shadow( rgba(0, 0, 0, 0.5), 3 );
|
|
1373
|
+
</td>
|
|
1374
|
+
</tr>
|
|
1375
|
+
</tbody></table>
|
|
1376
|
+
</div>
|
|
1377
|
+
|
|
1378
|
+
<div class="clearfix"></div>
|
|
1379
|
+
<br>
|
|
1380
|
+
<div class="clearfix"></div>
|
|
1381
|
+
|
|
1382
|
+
|
|
1383
|
+
|
|
1384
|
+
|
|
1385
|
+
<div class="samplebox pseudo_raised_shadow one smal">
|
|
1386
|
+
<h2>Pseudo Raised Shadow</h2>
|
|
1387
|
+
<p class="warning">@include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 30px, 10px, 0, 10px );</p>
|
|
1388
|
+
</div>
|
|
1389
|
+
|
|
1390
|
+
|
|
1391
|
+
|
|
1392
|
+
|
|
1393
|
+
|
|
1394
|
+
<div class="samplebox pseudo_raised_shadow two smal">
|
|
1395
|
+
<h2>Pseudo Raised Shadow</h2>
|
|
1396
|
+
<p class="warning">@include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 10px, 10px, 20px, 10px );</p>
|
|
1397
|
+
</div>
|
|
1398
|
+
|
|
1399
|
+
|
|
1400
|
+
|
|
1401
|
+
<div class="clearfix"></div>
|
|
1402
|
+
<br>
|
|
1403
|
+
</div>
|
|
1404
|
+
</div>
|
|
1405
|
+
|
|
1406
|
+
</div>
|
|
1407
|
+
</div>
|
|
1408
|
+
<div class="section">
|
|
1409
|
+
<div class="corset top">
|
|
1410
|
+
|
|
1411
|
+
|
|
1412
|
+
<div class="box">
|
|
1413
|
+
|
|
1414
|
+
<div class="head">
|
|
1415
|
+
<a name="perspective_shadow">Perspective Shadow</a>
|
|
1416
|
+
</div>
|
|
1417
|
+
<div class="context" style="position: relative; z-index: 1">
|
|
1418
|
+
|
|
1419
|
+
<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
|
|
1420
|
+
|
|
1421
|
+
|
|
1422
|
+
<div class="clearfix"></div>
|
|
1423
|
+
|
|
1424
|
+
<div class="samplebox perspective_shadow ">
|
|
1425
|
+
<h2>Perspective Shadow</h2>
|
|
1426
|
+
<table class="code">
|
|
1427
|
+
<tbody><tr>
|
|
1428
|
+
<td colspan="2">
|
|
1429
|
+
Perspective Shadow via :before Pseudo-Elements .. other box-shadows still possible !
|
|
1430
|
+
</td>
|
|
1431
|
+
</tr>
|
|
1432
|
+
<tr>
|
|
1433
|
+
<th>usage</th>
|
|
1434
|
+
<td>
|
|
1435
|
+
perspective_shadow( <span class="vars">color, times, degre, blur</span> );
|
|
1436
|
+
</td>
|
|
1437
|
+
</tr>
|
|
1438
|
+
<tr class="options">
|
|
1439
|
+
<td colspan="2">
|
|
1440
|
+
<table class="options">
|
|
1441
|
+
<thead>
|
|
1442
|
+
<tr>
|
|
1443
|
+
<th class="option">option</th>
|
|
1444
|
+
<th class="value">value</th>
|
|
1445
|
+
<th class="sample">sample</th>
|
|
1446
|
+
<th class="default">default</th>
|
|
1447
|
+
<th class="status">optional</th>
|
|
1448
|
+
</tr>
|
|
1449
|
+
</thead>
|
|
1450
|
+
<tbody>
|
|
1451
|
+
<tr>
|
|
1452
|
+
<th>color</th>
|
|
1453
|
+
<td>rgba | hex</td>
|
|
1454
|
+
<td>rgba(0,0,0,.5) | #333</td>
|
|
1455
|
+
<td> - </td>
|
|
1456
|
+
<td>✘</td>
|
|
1457
|
+
</tr>
|
|
1458
|
+
<tr>
|
|
1459
|
+
<th>times</th>
|
|
1460
|
+
<td>number</td>
|
|
1461
|
+
<td>1 - 9</td>
|
|
1462
|
+
<td>3</td>
|
|
1463
|
+
<td>✔</td>
|
|
1464
|
+
</tr>
|
|
1465
|
+
<tr>
|
|
1466
|
+
<th>degre</th>
|
|
1467
|
+
<td>degree</td>
|
|
1468
|
+
<td>50 | 30</td>
|
|
1469
|
+
<td>30</td>
|
|
1470
|
+
<td>✔</td>
|
|
1471
|
+
</tr>
|
|
1472
|
+
<tr>
|
|
1473
|
+
<th>blur</th>
|
|
1474
|
+
<td>Pixel</td>
|
|
1475
|
+
<td>3px | 0</td>
|
|
1476
|
+
<td>10px</td>
|
|
1477
|
+
<td>✔</td>
|
|
1478
|
+
</tr>
|
|
1479
|
+
</tbody>
|
|
1480
|
+
</table>
|
|
1481
|
+
</td>
|
|
1482
|
+
</tr>
|
|
1483
|
+
<tr>
|
|
1484
|
+
<th>
|
|
1485
|
+
this
|
|
1486
|
+
</th>
|
|
1487
|
+
<td class="code">
|
|
1488
|
+
@include perspective_shadow( rgba(0, 0, 0, 0.42), 1, 30, 3px );
|
|
1489
|
+
</td>
|
|
1490
|
+
</tr>
|
|
1491
|
+
</tbody></table>
|
|
1492
|
+
</div>
|
|
1493
|
+
|
|
1494
|
+
<div class="clearfix"></div>
|
|
1495
|
+
<br>
|
|
1496
|
+
<div class="clearfix"></div>
|
|
1497
|
+
|
|
1498
|
+
|
|
1499
|
+
|
|
1500
|
+
|
|
1501
|
+
<div class="samplebox perspective_shadow one smal">
|
|
1502
|
+
<h2>Perspective Shadow</h2>
|
|
1503
|
+
<p class="warning">@include perspective_shadow( rgba(102, 53, 53, 0.5), 5, 50, 5px );</p>
|
|
1504
|
+
</div>
|
|
1505
|
+
|
|
1506
|
+
|
|
1507
|
+
|
|
1508
|
+
|
|
1509
|
+
|
|
1510
|
+
<div class="samplebox perspective_shadow two smal">
|
|
1511
|
+
<h2>Perspective Shadow</h2>
|
|
1512
|
+
<p class="warning">@include perspective_shadow( rgba(204, 0, 0, 0.5), 2, 42, 10px );</p>
|
|
1513
|
+
</div>
|
|
1514
|
+
|
|
1515
|
+
|
|
1516
|
+
|
|
1517
|
+
<div class="clearfix"></div>
|
|
1518
|
+
<br>
|
|
1519
|
+
</div>
|
|
1520
|
+
</div>
|
|
1521
|
+
|
|
1522
|
+
</div>
|
|
1523
|
+
</div>
|
|
1524
|
+
|
|
1525
|
+
|
|
1526
|
+
|
|
1527
|
+
|
|
1528
|
+
</div>
|