Researching: Generating highlights and lowlights with javascript — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Researching: Generating highlights and lowlights with javascript

This page's ID: 29989

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	:confused: then you can use CSS outset border with the border color set to the background color, e.g:[code]selector { background-color:orange; border:1px outset orange; }[/code]You might need to tweak the dimensions of the element to make sure the border does not affect the box model. Or do you want something more programmatic ? Do you want a JS based tool to generate the highlight and lowlight colors from, say, an INPUT field ( or a color picker ) or a JS automating the generation and application of the highlight and lowlight colors to a set of HTML elements ? Also, do you want a simple increase/decrease of the RGB components or one that takes care of the Hue and Saturation ? Extracting the RGB components from an HEX or RGB() value can be done this way:[code]function getRGB( inputColor ) { var rgb = null; if( '#'==inputColor.charAt(0) ) { // HEX value var tmp = parseInt( inputColor.slice(1), 16 ); if( inputColor.length==4 ) { // short HEX value rgb = { r:(tmp>>8 )0x11, g:(tmp>>4&15)0x11, b:(tmp &15)0x11 } } else if( inputColor.length==7 ) { // long HEX value rgb = { r:tmp>>16&255, g:tmp>> 8&255, b:tmp &255 } } } else if ( 'rgb('==inputColor.slice( 0, 4 ).toLowerCase() ) { // RGB() value var tmp = inputColor.slice( 4, -1 ).split( ',' ); rgb = { r:Math.min( 255, Math.max( 0, Math.round( tmp[0]1 ) ) ), g:Math.min( 255, Math.max( 0, Math.round( tmp[1]1 ) ) ), b:Math.min( 255, Math.max( 0, Math.round( tmp[2]1 ) ) ) } } return rgb; }[/code]Then, can crank up/down them all, or compute the HSL and adjust the L at will. Notice that CSS3 and SVG include RGBA, HSL and HSLA colors so this will complicate things a bit. Unless you want absolute control on the highlight/lowlight colors, I suggest you to go for the [i]border:1px outset <background-color/>;[/i] option. Nice illustration btw ;) HTH [url=http://www.p01.org/][sigrotate][img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_love.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_love_small.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_charly.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_dk.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_reason.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_galaxy.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_neon88x31.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_teapot.png[/img][/sigrotate][/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu