-
Notifications
You must be signed in to change notification settings - Fork 173
/
Copy pathshadowProperties.html
193 lines (164 loc) · 9.49 KB
/
shadowProperties.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="The Shadow Properties component for KUTE.js allows you to create animations for shadow properties on supporting browsers.">
<meta name="keywords" content="textShadow,text-shadow,boxShadow,box-shadow,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.ico">
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
<title>KUTE.js Shadow Properties</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<style>
.text-example {
margin: 0 0 20px;
font-size: 28px;
line-height: 1.5;
white-space: nowrap;
color: #222
}
</style>
</head>
<body>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<nav class="navbar">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<div class="nav-wrapper d-flex align-items-center justify-content-between">
<ul class="nav">
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
<ul class="subnav">
<li><a href="transformFunctions.html">Transform Functions</a></li>
<li><a href="transformMatrix.html">Transform Matrix</a></li>
<li><a href="svgTransform.html">SVG Transform</a></li>
<li><a href="svgMorph.html">SVG Morph</a></li>
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
<li><a href="svgDraw.html">SVG Draw</a></li>
<li><a href="filterEffects.html">Filter Effects</a></li>
<li><a href="borderRadius.html">Border Radius</a></li>
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
<li class="active"><a href="shadowProperties.html">Shadow Properties</a></li>
<li><a href="colorProperties.html">Color Properties</a></li>
<li><a href="boxModel.html">Box Model</a></li>
<li><a href="clipProperty.html">Clip Property</a></li>
<li><a href="backgroundPosition.html">Background Position</a></li>
<li><a href="textProperties.html">Text Properties</a></li>
<li><a href="opacityProperty.html">Opacity Property</a></li>
<li><a href="scrollProperty.html">Scroll Property</a></li>
<li><a href="textWrite.html">Text Write</a></li>
</ul>
</li>
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
</ul>
<ul id="share">
<li>
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
</a>
</li>
<li>
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="content-wrap">
<h2 class="head-title">Shadow Properties</h2>
<p class="condensed lead">The component that animates shadow properties of a specific target element on most browsers.</p>
</div>
<div class="featurettes dark">
<div class="content-wrap">
<div class="columns">
<div class="col3">
<h3 class="border text-right">Overview</h3>
<p class="condensed text-right">Animate the shadow properties of a target element.</p>
</div>
<div class="col9 border">
<p class='condensed lead'>The KUTE.js <b>Shadow Properties</b> component enables animation for the <b>text-shadow</b> CSS property of text elements
as well as the <b>box-shadow</b> property of any element on most browsers.</p>
<p>The functionality was developed while writing a guide on how to extend KUTE.js a couple of years ago and is now a fully featured component.</p>
<p>The component uses <b>px</b> as unit for the shadow parameters, can animate the color of the shadow and can also handle the <b>inset</b> shadow parameter
of the <b>boxShadow</b> property.</p>
<p>OK let's have a look at a couple of quick examples:</p>
</div>
</div>
</div>
</div>
<div class="content-wrap">
<h3>Box Shadow</h3>
<pre><code class="language-javascript">// tween to a string value
var myBSTween1 = KUTE.to('selector', {boxShadow: '10px 10px #069'}).start();
// or a fromTo with string and array, hex and rgb
var myBSTween2 = KUTE.fromTo(
'selector', // target
{boxShadow: [0, 0, 0, '#069']}, // from
{boxShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
// maybe you want to animate an inset boxShadow?
var myBSTween3 = KUTE.fromTo(
'selector', // target
{boxShadow: [5, 5, 0, '#069', 'inset']}, // from
{boxShadow: '0px 0px rgb(0,0,0)'}) // to
.start();
</code></pre>
<div id="boxShadow" class="featurettes">
<div class="example-item example-box bg-lime"></div>
<div class="example-buttons">
<a class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Text Shadow</h3>
<pre><code class="language-javascript">// tween to a string value
var myTSTween1 = KUTE.to('selector', {textShadow: '10px 10px #069'}).start();
// or a fromTo with string and array, hex and rgb
var myTSTween2 = KUTE.fromTo(
'selector', // target
{textShadow: [0, 0, 0, '#069']}, // from
{textShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
</code></pre>
<div id="textShadow" class="featurettes">
<div class="text-example">Sample Text</div>
<div class="example-buttons">
<a class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Notes</h3>
<ul>
<li>The component will NOT handle multiple shadows per target at the same time.</li>
<li>The component features a solid value processing script, it can handle a great deal of combinations of input values.</li>
<li>I highly recommend that you check the <a href="./assets/js/boxShadow.js">boxShadow.js</a> for more insight.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>© 2015 - 2022 · <a href="https://github.com/thednp">thednp</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/shadowProperties.js"></script>
<script src="./assets/js/scripts.js"></script>
</body>
</html>