• untoreh-light
  • I am Francesco Giannelli. The website «unto.re» is the place where I put stuff I should remember...or forget. Located in south italy. Born in the early nineties.
    italy

Shades of Colors

Take a from black-white to colored gradient

This is some javascript that I wrote such that starting from a website, themed with shades of gray, you end up with gradient based on an accent color. Coupled with a color picker tool, a website can offer on-the-fly user based theming customization.

//function to return the color in hex value
        $.cssHooks.bgColor = {
                get: function(elem) {
                        if (elem.currentStyle)
                                var bg = elem.currentStyle["backgroundColor"];
                        else if (window.getComputedStyle)
                                var bg = document.defaultView.getComputedStyle(elem,
                                        null).getPropertyValue("background-color");
                        if (bg.search("rgb") == -1)
                                return bg;
                        else {
                                bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                                function hex(x) {
                                        return ("0" + parseInt(x).toString(16)).slice(-2);
                                }
                                return hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
                        }
                }
        }

        //function to make colors brighter or darker

        function shadeColor(color, porcent) {

                var R = parseInt(color.substring(1,3),16)
                var G = parseInt(color.substring(3,5),16)
                var B = parseInt(color.substring(5,7),16);

                R = parseInt(R * (100 + porcent) / 100);
                G = parseInt(G * (100 + porcent) / 100);
                B = parseInt(B * (100 + porcent) / 100);

                R = (R<255)?R:255;
                G = (G<255)?G:255;
                B = (B<255)?B:255;

                var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
                var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
                var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

                return "#"+RR+GG+BB;
        }

        function(){
                        $this = $(this) ;
                        bc = $($this).parent().css('bgColor');
                        var newc = shadeColor('#'+bc, 40);
                        $('.rt').css('opacity', '0.4');
                        $($this).parent().animate({backgroundColor: '\''+newc+'\''}, 1500).css({'opacity': '1', 'cursor' : 'hand'});
                }
                ,
                function(){
                        $(this).parent().animate({backgroundColor: '\'#'+bc+'\''}, 1500);
                        $(this).css({
                                opacity: 0.8
                        });
                        $('.rt').not($this).css('opacity', '0.7');?
Post Tags: