Topic: Researching: Generating highlights and lowlights with javascript Pages that link to <a href="https://ozoneasylum.com/backlink?for=29989" title="Pages that link to Topic: Researching: Generating highlights and lowlights with javascript" rel="nofollow" >Topic: Researching: Generating highlights and lowlights with javascript\
 
Author Thread
fyrebase
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Feb 2008

 IP logged posted posted 02-14-2008 01:15 Edit Quote

I'm looking for a little advice from anyone who has had experience or knows any examples of programmatically generating highlights and lowlights creating a bevel effect with javascript and css?
liorean
Paranoid (IV) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

 IP logged posted posted 02-14-2008 01:20 Edit Quote

CSS alone can do that I believe...

border-style: {inset|outset|ridge|groove};

--
var Liorean = {
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};
fyrebase
Obsessive-Compulsive (I) Inmate

From:
Insane since: Feb 2008

 IP logged posted posted 02-14-2008 01:25 Edit Quote

Thanks Liorean...

I was very brief with my description... my fault.

Basically, I am writing a script that will allow a user to pick a base color. From there, the highlights and lowlights for the bevel effect will be generated via javascript and applied via css.
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 02-14-2008 01:26 Edit Quote

Applied to what ? text, borders, images ?
fyrebase
Nervous Wreck (II) Inmate

From:
Insane since: Feb 2008

 IP logged posted posted 02-14-2008 01:38 Edit Quote

Hi poi,

The colors will be used as borders and backgrounds. Apllying the colors is easy, but programmatically generating the colors is where I need help.
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 02-14-2008 02:38 Edit Quote

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;
}

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;
}

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 border:1px outset <background-color/>; option.


Nice illustration btw
HTH
liorean
Paranoid (IV) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

 IP logged posted posted 02-14-2008 02:39 Edit Quote

Hmm. The square of overlap there is the only thing that isn't easily done with CSS.

Edit: The UBB code for URLs breaks with the data: scheme it seems...


I was trying to link this example of how CSS handles border overlaps:

data:text/html,<!DOCTYPE HTML PUCLIC "-//W3C//DTD HTML 4.01//EN"><title>borders</title><style type="text/css">p{border-top: solid 40px #cc0;border-right: solid 40px #660;border-bottom: solid 40px #660;border-left: solid 40px #cc0;background-color:#990;color:#fff;}</style><p>Just an example</p>
--
var Liorean = {
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 02-14-2008 02:43)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 02-14-2008 02:43 Edit Quote

Yep, so I doubt it's worth the overhead of doing some JS black magic just for 2 pixels.
Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

 IP logged posted posted 02-14-2008 02:56 Edit Quote

[Edit: just as I suspected... poi has beaten me to the punch, and with more helpful advice. Feel free to ignore this post.]

I'm not sure how much help I can be, but I'll give it a shot. This post is not going to provide you any hard and fast answers, because I don't have any, but I'm going to try to think through the problem with you and hopefully point you in the right direction. Given the speed at which replies are being offered in this thread, someone else may already have gotten to this.

For starters, I haven't heard the term "lowlight" before. Usually it's referred to as "shadow," I think. And the color you have up there as a "lowlight" isn't a shadow, it's a different color entirely. I pulled these colors up in Photoshop to take a closer look at some of the values. If you look at the HSB values you get this:

Original color: H = 30, S = 100, B = 100
"Lowlight" color: H = 17, S = 99, B = 100

So we can see that the saturation and brightness are pretty much the same for both colors, and the only difference is the hue. So it's not really a shadow at all. If we take the original color and drop the brightness to 80, we get this color:

Shadow: R = 204, G = 102, B = 0
Original: R = 255, G = 126, B = 0

We basically dropped each RGB value by a certain amount. Red was dropped by 41, green was dropped by 24, and blue wasn't dropped at all because it was already zero. Is there a rhyme or reason to these numbers? You'll notice that each of these numbers is approximately 80% of the original. 80% of 126 would actually be rounded up to 101, not 102, so there's obviously something else going on here, but for our purposes multiplying each number by .8 seems to work. At any rate, in order for the two colors to be shades of each other, the RGB color values have to maintain basically the same ratio to each other. If you look at the HSB values, you'll see that both colors have a hue of 30. So we have a true shadow here.

But what about the highlight? Let's take a look at the HSB values again for the colors you have up there:

Original: H = 30, S = 100, B = 100
Highlight: H = 42, S = 100, B = 99

Again, we see the same problem--saturation and brightness are more or less the same, and only the hue has changed. So we don't have a real highlight, we just have a different color. But this time we can't just raise the brightness because it is already at 100. And we can't just increase each value by 20% because blue is currently at zero and increasing it by 20% would give us zero! Try multiplying each RGB value by 1.2 and you'll find that only the green changes, giving us a different hue (basically the same problem we have with the colors in your image).

What to do? We go to the Lab values. Lab stands for Luminance and "a" (red-green spectrum) and "b" (yellow-blue spectrum). We're not interested in either a or b, since we don't want to change the color or hue, but we are interested in luminance. And if you look at the luminance value for your base color you'll see that it is 67, so we have some room to maneuver. Let's raise the luminance to 80 (approximately a 20% increase) and see what happens, using the HSB values:

Original: H = 30. S = 100, B = 100
Highlight: H = 32, S = 80, B = 100

The hue is a bit off, but we notice that the saturation has been decreased by 20%. Let's bring the hue back to 30 and see what we get in RGB:

Original: R = 255, G = 126, B = 0
Highlight: R = 255, G = 153, B = 51

The green has increased by in value by 27, and blue has increased in value by 51. Because blue started at zero, we can't really measure a percentage increase, but a pattern is emerging: the closer a color value comes to either end of the black-white spectrum, the more it has to change to produce a highlight or a shadow. This is where the math comes in, and maybe someone better at math can help with the algorithm necessary to produce these highlights and shadows. The basic principle, though, is this: to maintain the same color and just change the shading, all RGB values need to be either lowered or raised together, and the changes need to be proportional to each other. Changing only one value or changing the values disproportionately will give you a different color entirely, not a different shade of the same color.

OK, that was a whole lot of words for what is probably very little help, but I gave it a shot. I may try to tackle this problem again later if you're still struggling with it, but maybe this will be enough to get you going in the right direction.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

(Edited by Suho1004 on 02-14-2008 02:57)
fyrebase
Nervous Wreck (II) Inmate

From:
Insane since: Feb 2008

 IP logged posted posted 02-14-2008 03:34 Edit Quote

poi and suho...

Thank you very much for taking the time to respond. Both of you have given me extremely useful information.

I will post back here when I have a working example, again thank you for your time and help.

I've update the illustration to exclude the overlap, that wasn't suppose to be there.



(Edited by fyrebase on 02-14-2008 03:34)


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu