"tip" apple navigation tabs, light and dark versions with animation fx's

[George H. Compton IV]

Thanks dave for the idea and the snippets of codes and you're welcome for the tabs  :-)

You can change the color Of the text by changing the colors black and white in the code below. White is the the color of the mouse over affect.

you can change the width of the main tabs by Lowering the numbers in this line of code min-width:165.4px!important; its the very last line

Right click on the images and open it in a new tab to get a better view

Dark tabs

this code goes in your NC custom code box

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/ONa9I9r9VT03F6dWg*AqGEq3O2RvzfkN3kZX-kXkUtYqQy5zyrvIpTnThdlUJX*7reOksFjt0TDAI*oxUNGJcjXxFphDL4ok/apple_tabs_dark.css" />

<style>
DIV#xg_navigation .xg_subtab SPAN{color:black!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation  A{opacity: 0.86!important;
max-width:165.4px!important;
min-width:165.4px!important;}
</style>

light tabs

this code goes in your NC custom code box

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/hFSnUd6hMmoAevf2yj4KOR3544xJXdp9HsaBz96fuZgqYoiBYq4D8NGwY0a8Yn*Do4LJTMd1bQMOgbMV6Ba3MA__/apple_tabs_light.css" />

<style>
DIV#xg_navigation .xg_subtab SPAN{color:black!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation  A{opacity: 0.86!important;
max-width:165.4px!important;
min-width:165.4px!important;}
</style>

[George H. Compton IV]

like I told you in your discussion I love the animation and now it's in my comments if Anybody wants them :-) thank you Dave

[Damien Hannah]

Hey George, I've decided to change to these tab styles. Love it! Can you tell me how I would place yellow | separators? If you look how I have this set up, the tabs now seem to merge and don't seem separated. If I just have this symbol "|" (found under my delete key on my Mac) in between each one, that would be excellent. OR, is there a way to make the starting tabs (main display, no mouse over or action) look embossed or inlaid?

Thanks, great Tip George!