Tool-Review on Damian Galarza | Software Engineering & AI Consultinghttps://www.damiangalarza.com/tags/tool-review/Recent posts from Damian Galarza | Software Engineering & AI ConsultingHugoen-usDamian GalarzaGradient Generator Updatedhttps://www.damiangalarza.com/posts/2010-12-04-gradient-generator-updated/Sat, 04 Dec 2010 00:00:00 -0500Damian Galarzahttps://www.damiangalarza.com/posts/2010-12-04-gradient-generator-updated/Along with these changes the public github repository has been restructured. Only the important things (the JavaScript source of course) are up in the repo. Meaning, you can go ahead and browse it, fork it, learn how it works or use in your own project. Be warned that a lot of the code is pretty specific to the HTML structure of the actual gradients.glrzad.com website. It was never intended to be used as a plugin, though perhaps

Check out the changes live, visit the CSS3 Gradient Generator.

Release Notes

Color Format Selection
Color format selection: Choose how your colors are formatted, either RGB or HEX.
The gradient generator will store your preference for the next time you visit!
<dt>Copy the code!</dt>
<dd>Copies the output code to your clipboard for you so you can quickly grab your generated code.</dd>

<dt>UI Updates</dt>
<dd>Stripped down page to the core components of the gradient generator, moving it to the top of the fold.</dd>
]]>CSS3 Webkit Gradient Generatorhttps://www.damiangalarza.com/posts/2009-09-14-css3-webkit-gradient-generator/Mon, 14 Sep 2009 00:22:32 +0000Damian Galarzahttps://www.damiangalarza.com/posts/2009-09-14-css3-webkit-gradient-generator/Visit the CSS3 Webkit Gradient Generator

CSS gradients are quite powerful and very useful, but when taking a first look at the markup for writing a code based gradient it can appear daunting. This is why I’ve decided to create the CSS3 Webkit Gradient Generator. Please note that the generator is intended to be viewed in a webkit browser. Live sampling of the gradient will not be available without a webkit browser.

The gradient generator has 2 goals. The first is to provide a showcase for the power of CSS gradients. The second, is to provide a graphical user interface in which a user can visually create gradient code to use in their CSS where they see fit. In order to do this, I tried to create a UI that appears familiar, such as that of a graphic editing tool like Adobe Photoshop. Providing color swatches to make up the gradient and a slider for each to determine the color’s position in the gradient.

Color Swatch Control

Color Swatch Control

Once a color swatch is selected the user can use the color picker found on the right to adjust the swatch’s color. The color picker is provided by the ColorPicker jQuery plugin from eyecon.ro.

jQuery ColorPicker Plugin

Gradient Direction Control

Along with this control, I have added the ability to set the direction of the gradient, allowing the user to take advantage of the keywords that are available (left, right, bottom, top) or use custom point locations.

Gradient Direction Control

Live Sampling

The generator provides live sampling, meaning any changes that are made to the controls on the page will immediately update the color sample and the CSS code output.

Note: Live sampling of the gradient colors requires a webkit browser.

Live Sampling

Coming Soon

There are still more features to be implemented. Currently, the gradient generator only supports linear gradients. I'm working to provide radial gradient support in the near future. Also, currently the generator will only accept hex color values, I am planning on adding RGB support soon as well.

Let me know what you think of the generator so far as well as any features you may like to see.

Links

]]>