October 24, 2005

DHTML Widgetry

Steven Wittens has created a ridiculously cool DHTML HSV colourpicker, which cunningly uses overlaid transparent PNGs to get the SV square in the middle. Not content with that, he also created a way to turn a select box into a discrete-mark slider bar using only CSS. See his full blogpost for more details.

Posted by gerv at October 24, 2005 10:22 PM
Comments

Seems to be stuck on one color: burnt server.

Posted by: Hanspeter at October 24, 2005 11:32 PM

It is pretty cool, but it is not an HSV color picker. It is an RGB color picker. HSV is a different colorspace, not just a style/type of color picker. HSV isn't even mentioned anywhere that I see.

Posted by: HeroreV at October 25, 2005 2:53 AM

Actually, the slider also uses JavaScript. I would be pretty impressed if that were done using nothing but CSS.

Posted by: Jan! at October 25, 2005 8:42 AM

This is technically impressive but I think the UI would be simpler with one colour rather than 4.

Posted by: Gids at October 25, 2005 9:53 AM

HeroreV: it is HSV. The hue is the outside circle, vertical movement is the value (brightness) and horizontal movement is saturation (moving from pure colour to grey). If you check the Wikipedia article on HSV, you'll see a diagram much like the widget.

Jan: Oops, you are right. Sorry.

Posted by: Gerv at October 25, 2005 10:04 AM