Works on Desktop Safari, desktop Google Chrome, desktop Firefox 3.6-4, iPhone, iPod Touch, iPad.
So, in the last blog post I showed how to make RGB slides with HTML, CSS and some JavaScript. I thought about it and, while interesting, it doesn’t have a whole lot of practical application. Sure you could take that and hook up any other type of value to get whatever result you might need for your interface. Well that got me to thinking, so I threw together an implementation of the RGB sliders that allow a user to change the color scheme of a Web app. No need to spend time creating different color themes. Let the user do it.
OK, before you think I’m crazy, especially you folks from the design community, let me explain. I came up with a basic theme technique. I call it chromaeleon &mdash because the app’s chrome can change colors like a chamaeleon. The way this works is, instead of solid color gradients, you create gradients with transparent values of black and white. Behind this you have a background color which shows through the transparent gradients. This way, when the user drags the sliders, the background colors update and the look of the interface changes. Now in the real world you’d want to provide a way for the user to save their color choice. You could save the choice to localStorage. Then when the app loads, it checks to see it the user saved a color choice, if not, it goes to the default. Sorry, I didn’t do all of that. Just the part to update the background colors. Here’s what it will look like:
The structure we’re going to use is pretty must standard as we’ve used elsewhere, a header, a section, some buttons.
<body> <header> <a href="http://css3wizardry.com" class="button back"><span class="pointer"></span><span>Back</span></a> <h1>Chromaeleon Theme</h1> <span class="button">Click Here</span> </header> <section> <h2>Use the sliders to adjust the colors of the theme.</h2> <div class="colorRow"> <div id="redSlider" class="slider"> <div class="thumb"></div> </div> <div id="redColor" class="colorOutput"></div> <span> Red</span> </div> <div class="colorRow"> <div id="greenSlider" class="slider"> <div class="thumb"></div> </div> <div id="greenColor" class="colorOutput"></div> <span> Green</span> </div> <div class="colorRow"> <div id="blueSlider" class="slider"> <div class="thumb"></div> </div> <div id="blueColor" class="colorOutput"></div> <span> Blue</span> </div> <div class="colorRow finalResult"> <span>Final Color: </span> <div id="rgbColor" class="colorOutput"></div> <br /> <span>RGB: </span><span id="rgbResult">0, 0, 0</span> <br /> <span>HEX: </span><span id="hexResult">#000000</span> </div> </section> </body>
So, for the header and the buttons, we need to change their default gradients, as I mentioned above, to have RGBA transparency values. This is my basic gradient:
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(30,30,30,.65) 50%, rgba(0,0,0,.7) 50%, rgba(0,0,0,.8)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), color-stop(0.5,rgba(30,30,30,.65)), color-stop(0.5, rgba(0,0,0,.7)), to(rgba(0,0,0,.8)));
And for the hover state of the button, we use this gradient:
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), color-stop(0.5,rgba(0,0,0,.5)), color-stop(0.5, rgba(0,0,0,.6)), to(rgba(255,255,255,.2))); background-image: -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,.5) 50%, rgba(0,0,0,.6) 50%, rgba(255,255,255,.2));
Now to change the color, all we need to do is introduce a new method to our existing code:
/**
*
* Method to update chrome colors according to the RGB value of the sliders.
*
*/
$.updateInterfaceColors = function() {
$("header").css("background-color: rgb(" + $.rgbColor[0] + "," + $.rgbColor[1] + "," + $.rgbColor[2] + ")");
$$(".button").forEach(function(button) {
button.css("background-color: rgb(" + $.rgbColor[0] + "," + $.rgbColor[1] + "," + $.rgbColor[2] + ")");
});
$("section").css("background-color: rgb(" + $.rgbColor[0] + "," + $.rgbColor[1] + "," + $.rgbColor[2] + ")");
$(".pointer").css("background-color: rgb(" + $.rgbColor[0] + "," + $.rgbColor[1] + "," + $.rgbColor[2] + ")");
};
To execute this method, we invoke it in the slide mouse event handlers for each slider, and for touch-based mobile devices we invoke it in the updateSliderTouch method:
/**
*
* This is for the red slider's mouse interaction, you'd do the same for the green and blue sliders' setup scripts as well.
*/
// Set up three sliders for Red, Green and Blue:
$.slider("#redSlider", {
onDrag : function() {
$("#redSlider").setColorFromSlider("red");
$.updateInterfaceColors();
},
// onDragEnd function necessary to remove hover state off of slider thumb when drag ends.
onDragEnd : function() {},
top : -6
});
/**
*
* This is for touch-enabled devices. You invoke the $.updateInterfaceColors() method just once inside the updateSliderTouch method's definition, at the very end.
*/
Element.prototype.updateSliderTouch = function( color ) {
this.style.left = curX + 'px';
if (color === "red") {
$("#" + color + "Color").css("background-color: rgb(" + curX +",0,0)");
$.rgbColor[0] = curX;
}
if (color === "green") {
$("#" + color + "Color").css("background-color: rgb(0," + curX +",0)");
$.rgbColor[1] = curX;
}
if (color === "blue") {
$("#" + color + "Color").css("background-color: rgb(0,0," + curX +")");
$.rgbColor[2] = curX;
}
$("#" + color + "Slider").css("-webkit-background-size:" + (curX + 1) + "px 9px, 100% 9px");
$("#" + color + "Slider").css("background-size:" + (curX + 1) + "px 9px, 100% 9px");
$("#rgbColor").css("background-color: rgb(" + $.rgbColor[0] + "," + $.rgbColor[1] + "," + $.rgbColor[2] + ")");
$("#rgbResult").fill($.rgbColor[0] + ", " + $.rgbColor[1] + ", " + $.rgbColor[2]);
$("#hexResult").fill("#" + $.rgb2hex($.rgbColor[0]) + $.rgb2hex($.rgbColor[1]) + $.rgb2hex($.rgbColor[2]));
$.updateInterfaceColors();
};
This works great on desktop Safari, Chrome and even Firefox (Yay!), and fine on the iPad. For iPod Touch or iPhone you need to load it in portrait mode. it’s a bit cramped due to the size of the sliders. I needed them to be at least 255px long for the RGB values, and then borders, box shadows and the extra space for the thumbs made them barely fit in the iPhone’s and iPod Touch’s default width. Try hitting the plus icon at the bottom of the browser and save it to you device’s desktop. Then run it from there, you’ll have more vertical space. You can try this out online or download the source code. Enjoy!
