Thursday, February 6, 2014

Automatic Background creation with Linear Gradient colors


    In continuation of my previous post on background generation using javascript, this post aims at refining and advancing in automatic Background changing.

    I accomplished this using Canvas from javascript (browser side) and no server-side coding or images used or needed. but your browser should be modern, supporting HTML5 (Canvas).
   What the javascript code does is, it automatically generates the random starting-color and ending-color required for the linear-gradient to work.

 below are the screenshots in action with gradient background in firefox.

I have tested it in Firefox 6 & Opera 11.

There is an alternative using CSS to apply gradient-colors as background, but it seems only supported in Firefox. If you know or found any alternative, suggestion share here in comments.

 You can even save color (allowing for end-user), just add StartColor and EndColor (for gradient) into a Cookie, and read from this cookie whenever user opens again (not implemented in code)!
You can even save this background-image (from firefox), and i found its <2KB in size.

 If you want to test or extend it, try it on Opera (supports, run from filesystem and flicker free!)

 For code download or sample demo,
check this link: Automatic Background-Changer

No comments:

Post a Comment