{"id":99,"date":"2005-11-24T16:11:11","date_gmt":"2005-11-24T16:11:11","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/11\/any-colour-fade-technique"},"modified":"2006-04-30T23:26:39","modified_gmt":"2006-04-30T23:26:39","slug":"colour-fade","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/11\/colour-fade","title":{"rendered":"Any-Colour Fade Technique"},"content":{"rendered":"

I\u2019m sure many of you will have heard of the\r\n\t\tyellow fade technique<\/a>, pioneered\r\n\tby 37 signals and popularised by its use in Basecamp<\/a>. The problem with that\r\n\tscript, however, is that the colours, including all the steps in between, are\r\n\thard coded which makes it fairly complex to work with if you\u2019re not just fading\r\n\tone colour.<\/p>\r\n

For a project I\u2019m working on at the moment, the client wanted various colours\r\n\tto fade appropriately, and I needed a script that was not only generic in the\r\n\tcolours it supported, but incredibly easy to reuse. I also figured, why don\u2019t\r\n\tI just make a general colour object to handle all your scripting-colour needs.<\/p>\r\n

So, I give you the Color()<\/code> script<\/a>.\r\n\tAlthough I took inspiration from Eric\r\n\tMeyer’s Color Blender<\/a>, I did completely\r\n\trewrite the entire script for my needs. This is an object-oriented script\r\n\twho\u2019s constructor accepts various parameters in order to specify the colour\r\n\tand it even has support for an alpha channel. You can either pass it 3 integer\r\n\tparameters, each representing the RGB colour component and an optional 4th\r\n\tparameter representing the alpha channel. Additionally, it will also accept\r\n\ta string with any valid CSS 2.1 Color Value or keyword, plus CSS3\u2019s RGBA\r\n\tsyntax. (HSL and HSLA are not yet supported).<\/p>\r\n

The blend function is where it really shines. You pass it the colour you wish\r\n\tto blend with and the number of steps it should take, and it returns a pallet\r\n\tof colours for all the steps. I made a colour\r\n\tfading demo<\/a> just to show off how powerful and easy to use the script\r\n\tis. Enter any supported colour value and watch the background colour\r\n\t\tfade from the current colour to the new colour. You can also customise\r\n\t\tthe number of steps and the interval between them. I hope you find this\r\n\t\tscript useful, feel free to use it wherever or however you like.<\/p>","protected":false},"excerpt":{"rendered":"Script to handle all your colour needs, including fading from one colour, to any other colour.","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-99","post","type-post","status-publish","format-standard","hentry","category-script"],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}