Forum Moderators: not2easy

Message Too Old, No Replies

CSS button state?

         

Bigjohn

11:26 am on Jan 23, 2004 (gmt 0)

10+ Year Member



This CSS is borrowed from the 'csstips' beveled buttons.

/* Link Rules for Horizontal and Vertical CSS Menus */

a{display:inline;text-decoration:none;
font-size:13px;font-variant:small-caps;
padding:1px 2px 2px 4px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
}

a:link, a:visited{color:#800000; background:#ede7c0;}
a:hover{color:#330000;
border-top:1px solid #000;
border-left:1px solid #808080;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
background:#daa520;}

a:active{color:#330000;background:#bdb76b;}

The background for a:active does not seem to apply unless I remove the 'background' from the a:hover def. When I do that the background for a:active works perfectly.

Also, is there a way - besides guessing - to get a color to be several shades darker or lighter than a specified shade? I'm horrible at matching colors.

john

SuzyUK

5:36 pm on Jan 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Bigjohn - Welcome to WebmasterWorld

it's there for me in IE anyway.. but I see what you mean in NN

if you add a:focus; to the a:active rule it works better in NN

are you expecting that the "active" color will remain according to the page you're on? if so that's a different question.. and there are ways to do this using classes to dictate the "active" state

Try this tool Eric Meyer's Color Blender [meyerweb.com] for finding shades of color...

Suzy

DrDoc

5:41 pm on Jan 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



is there a way - besides guessing - to get a color to be several shades darker or lighter than a specified shade?

...assuming you know (and generally understand) how the RGB Hex colors work:

Say that you have the color #999999
Of course this is a medium gray sort of color. Now, you can either add/remove colors. For the color to be preserved, you must adjust all three colors (Red Green Blue) equally. As an example, #333333 would be a darker color, while #dddddd would be a lighter color. Simple! (And you already knew that much...)

What about this color: #000099? Well, that's a medium blue color. Applying the same principle, you can get colors like #000033 and #0000dd.

Now, let's complicate it and use a color like: #9f38ad
To make it simple, just adjust the first "digit" of each RGB section. So, we'll make 9f four shades lighter (9f > af > bf > cf > df), and do the same with 38 (38 > 48 > 58 > 68 > 78), and finally also with ad (ad > bd > cd > dd > ed) -- thus giving us the total adjustment #9f38ad > #af48bd > #bf58cd > #cf68dd > #df78ed. We can do something similar to get a darker color: #9f38ad > #8f289d > #7f188d > #6f007d > #5f006d