2020-06-09 22:08:43 +02:00
<!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 >
2020-07-02 12:49:06 +02:00
< div class = "nav-wrapper d-flex align-items-center justify-content-between" >
2020-06-09 22:08:43 +02:00
< 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" >
2020-06-09 22:22:33 +02:00
< div class = "columns" >
2020-06-09 22:08:43 +02:00
< 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(
2020-06-11 07:01:56 +02:00
'selector', // target
{boxShadow: [0, 0, 0, '#069']}, // from
{boxShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
2020-06-09 22:08:43 +02:00
// maybe you want to animate an inset boxShadow?
var myBSTween3 = KUTE.fromTo(
2020-06-11 07:01:56 +02:00
'selector', // target
{boxShadow: [5, 5, 0, '#069', 'inset']}, // from
{boxShadow: '0px 0px rgb(0,0,0)'}) // to
.start();
2020-06-09 22:08:43 +02:00
< / code > < / pre >
2020-06-11 07:01:56 +02:00
< 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 >
2020-06-09 22:08:43 +02:00
2020-06-11 07:01:56 +02:00
< h3 > Text Shadow< / h3 >
2020-06-09 22:08:43 +02:00
< 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(
2020-06-11 07:01:56 +02:00
'selector', // target
{textShadow: [0, 0, 0, '#069']}, // from
{textShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
2020-06-09 22:08:43 +02:00
< / code > < / pre >
2020-06-11 07:01:56 +02:00
< 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 >
2020-06-09 22:08:43 +02:00
< / div >
2020-06-11 07:01:56 +02:00
< / div >
2020-06-09 22:08:43 +02:00
2020-06-11 07:01:56 +02:00
< 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 >
2020-06-09 22:08:43 +02:00
2020-06-11 07:01:56 +02:00
<!-- FOOTER -->
< footer >
< div class = "content-wrap" >
< p class = "pull-right" > < a id = "toTop" href = "#" > Back to top< / a > < / p >
< p > © 2015 - 2020 · < a href = "https://github.com/thednp" > thednp< / a > .< / p >
< / div >
< / footer >
2020-06-09 22:08:43 +02:00
2020-06-11 07:01:56 +02:00
< / div >
2020-06-09 22:08:43 +02:00
<!-- /.site - wrapper -->
2020-06-16 16:37:41 +02:00
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
2020-06-09 22:08:43 +02:00
2020-06-11 07:01:56 +02:00
< script src = "./src/polyfill.min.js" > < / script >
< script src = "./src/kute-extra.min.js" > < / script >
< script src = "./assets/js/prism.js" > < / script >
2020-06-09 22:08:43 +02:00
2020-06-11 07:01:56 +02:00
< script src = "./assets/js/shadowProperties.js" > < / script >
< script src = "./assets/js/scripts.js" > < / script >
2020-06-09 22:08:43 +02:00
< / body >
< / html >