{"id":233,"date":"2009-01-15T16:48:50","date_gmt":"2009-01-15T22:48:50","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=233"},"modified":"2009-01-15T19:57:54","modified_gmt":"2009-01-16T01:57:54","slug":"gradient-on-steroids","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/01\/15\/gradient-on-steroids\/","title":{"rendered":"<code>gradient<\/code> on steroids"},"content":{"rendered":"<p>I was playing with Brandon Aaron's <a href=\"http:\/\/brandonaaron.net\/jquery\/plugins\/gradient\/docs\/\">gradient<\/a> plugin (based on Steven Slayer's <a href=\"http:\/\/slayeroffice.com\/code\/gradient\/\">gradient<\/a>) and started adding options and playing with it, so now you can use named colors, percent sizes, and animation.<p>\r\n<p><a href=\"\/inc\/jquery.gradient.js\">Download the code<\/a>.<\/p>\r\n<p><a href=\"\/blog\/blogfiles\/cssparser\/gradienttest.html\">See the demo page<\/a>.<\/p>\r\n<!--more-->\r\n<p>It's more than twice the size now, but it's been fun playing with it. Maybe someone else will find it useful.<\/p>\r\n<h4>Use<\/h4>\r\n<p><code>$('div').gradient([options])<\/code> creates a color gradient in the background of the matched elements without images. It works by creating a series of absolutely positioned <code>&lt;div&gt;<\/code> elements with varied background colors.<\/p>\r\n<h4>Three ways to call <code>gradient<\/code>:<\/h4>\r\n<h4><code>$('div').gradient([options])<\/code><\/h4>\r\n<p>Call with an options object. The following options are available:<\/p>\r\n<dl>\r\n<dt><code>from<\/code> {<code>String<\/code>|<code>Array<\/code>}<\/dt>\r\n<dd>The color to start from. Can be one of the following:\r\n  <ul>\r\n  <li>CSS color designation (like (<code>'#0faaee'<\/code> or <code>'#fff'<\/code> or '<code>rgb(1,1,100)'<\/code> or <code>'rgb(50%,40%,75%)'<\/code>)<\/li>\r\n  <li>Color name (like <code>'aqua'<\/code> or <code>'blue'<\/code>)<\/li>\r\n  <li>For compatibility with the original <code>gradient<\/code>, a six-digit hex number without the leading '#' (like <code>'0faaee'<\/code>)<\/li>\r\n  <li>Attribute name (like <code>'backgroundColor'<\/code> or <code>'border-top-color'<\/code>; the attribute will be copied from the matched element. If the element does not have the named attribute, the ancestors of the element are checked)<\/li>\r\n  <li>RGB array (like <code>[0, 255, 255]<\/code>)<\/li>\r\n  <\/ul>\r\n  Default: <code>'backgroundColor'<\/code>\r\n<\/dd>\r\n<dt><code>to<\/code> {<code>String<\/code>|<code>Array<\/code>}<\/dt>\r\n<dd>The color to end the gradient. Same values as <code>from<\/code>. Default: <code>'#ffffff'<\/code><\/dd>\r\n<dt><code>direction<\/code> {<code>'vertical'<\/code>|<code>'horizontal'<\/code>}<\/dt>\r\n<dd>Axis of the gradient. This is the orientation of each stripe; <code>'vertical'<\/code> means the colors progress from left to right, <code>'horizontal'<\/code> means the colors progress from top to bottom. Default: <code>'horizontal'<\/code><\/dd>\r\n<dt><code>length<\/code> {<code>Number<\/code>|<code>String<\/code>}<\/dt>\r\n<dd>Size of the gradient (height for <code>direction: 'horizontal'<\/code>, width for <code>direction: 'vertical'<\/code>; it always fills the element in the other direction). Can be a number of pixels or a CSS size (like <code>'10px'<\/code> or <code>'2em'<\/code> or <code>'50%'<\/code>). Default: <code>'100%'<\/code><\/dd>\r\n<dt><code>position <\/code>{<code>'left'<\/code>|<code>'right'<\/code>|<code>'top'<\/code>|<code>'bottom'<\/code>}<\/dt>\r\n<dd>Where in the element to place the gradient, aligned with the left or right edge (for <code>direction: 'vertical'<\/code>) or top or bottom edge (for <code>direction: 'horizontal'<\/code>). Default: <code>'top'<\/code><\/dd>\r\n<dt><code>opacity<\/code> {<code>Number<\/code>}<\/dt>\r\n<dd>Opacity (<code>0<\/code>&mdash;<code>1<\/code>) of the gradient.\r\n<dt><code>complete <\/code>{<code>Function<\/code>|<code>undefined<\/code>}<\/dt>\r\n<dd>Callback function when gradient is completed (probably most useful for animations). Scope (<i><code>this<\/code><\/i>) is the DOM element. Default: <code>null<\/code><\/dd>\r\n<dt><code>duration<\/code> {<code>Number<\/code>|<code>'fast'<\/code>|<code>'slow'<\/code>|<code>'normal'<\/code>}<\/dt>\r\n<dd>If not <code>0<\/code>, animate the gradient filling the element. This is the standard <a href=\"http:\/\/docs.jquery.com\/Effects\/show#speedcallback\">animation <code>duration<\/code> or <code>speed<\/code><\/a>. Default: <code>0<\/code><\/dd>\r\n<dt><code>easing<\/code> {<code>String<\/code>}<\/dt>\r\n<dd>The easing (the way the animation runs; see Robert Penner's <a href=\"http:\/\/www.robertpenner.com\/easing\/penner_chapter7_tweening.pdf\">article<\/a> and <a href=\"http:\/\/www.robertpenner.com\/easing\/easing_demo.html\">demonstrations<\/a>). <a href=\"http:\/\/docs.jquery.com\/UI\/Effects\/AdvancedEasing\">jQuery UI<\/a> includes a bunch of cool easing equations. Default: 'linear'<\/dd>\r\n<\/dl>\r\n<h4><code>$('div').gradient(from [, to [, direction]])<\/code><\/h4>\r\n<p>Simple calling signature to set the most common options, like <code>$('div').gradient('blue','green')<\/code><\/p>\r\n<h4><code>$('div').gradient('remove')<\/code><\/h4>\r\n<p>Removes the gradients if any from the matched elements.<\/p>","protected":false},"excerpt":{"rendered":"I was playing with Brandon Aaron's gradient plugin (based on Steven Slayer's gradient) and started adding options and playing with it, so now you can use named colors, percent sizes, and animation. Download the code. See the demo page.","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/233"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":17,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/233\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}