color Shades jQuery Plugin

colorShades is a jQuery plugin developed by me. It generate a html/css component for showing color shades for selected color for html input container.

Following code is needed to show widget.

$(field).colorShades({
   l_items: LIGHTER_SHADES_COUNT,
   r_items: DARKER_SHADES_COUNT,
   step: STEPS,
   base_color: BASE_COLOR,
   onSelect : CALLBACK
});

Exmaple :

$('#fieldId').colorShades({
   l_items: 10,
   r_items: 10,
   step: 3,
   base_color: '#FF0000',
   onSelect : function(color) {
       console.log('Selected Color '  + color);
   }
});

BASE_COLOR is hex color code for color which shades are needed
LIGHTER_SHADES_COUNT is color shades lighter than base color.
DARKER_SHADES_COUNT is color shades darker than base color
STEPS define the how much color change during next palette color. More steps means bigger change.
CALLBACK set the custom functionality on selection of color.

Screen Shot

color-shades-demo
Project Home Page : https://github.com/kuldeep-k/colorShades

Note : Plugin requires following 3rd party libraries.

jQuery
TinyColor

chat box effects by css

It is something strange for CSS effects article from a programmer. But yes today I am sitting on PC and check out some CSS effects after some explore I get the cute box can be used for a chat box.

These is generated after some css3 special effects like shadow, radius, transform. The css can be applied like that.

<style>
    .box {
        width: 300px;
        min-height: 50;
        border-radius: 5px;
        box-shadow: 3px 3px 5px 6px #ccc;
        padding: 15px;
        margin: 10px;
        font-family: arial;
        font-size: 13px;
        transform: skew(-10deg);
        -webkit-transform: skew(-10deg);
              
    }

</style>

Screenshot for resulted box is 

Image

While all effects work on FF20 on without using -moz prefix, While for strange reason Chrome 25 still need -webkit prefix to apply transform effects.

You can check the demo from http://jsfiddle.net/RqQbp/