account links pimpin

[soaringeagle]

once again inspiration hit and  todays tip was born i cant show u a live demo without ya signing in to my site so hope screenshots will do

1st the code

div.xj_user_info div#xg_module_account div.xg_module_body ul li a.xg_sprite {text-shadow:4px 3px 1px blue;}
div.xj_user_info div#xg_module_account div.xg_module_body ul li a.xg_sprite:hover {padding-left:2em;text-shadow:2px 6px 3px red;-webkit-transition:all 2s ease-out;-moz-transition:all 2s ease-out;}

ok explanation, 1st part adds a blue text shadow to the links 2nd part on hover moves the links right in a glide motion as the links move the text shadow shifts from slightly more to the right of the text to slightly more below the text while "spreading" or softening and changing colors to red

tweaking instructions the px values  in order are offset to the right of text  offset below text and px spread of the shadow  (last 1 the higher the value the thicker and more fuzzy or difused it looks

 you can try diferent color values  and px displacements to get a shifting light effect as it slides out

forgot to mention it gradualy switches link text color to from the regular to hover colors

ps i wrote it freehand and probably will tweak it more before im finaly satisfied

toned down slowed down version added 1/2 a sec to the transition, changed the original color to black final color ccc a grey

div.xj_user_info div#xg_module_account div.xg_module_body ul li a.xg_sprite {text-shadow:4px 3px 1px #000;}
div.xj_user_info div#xg_module_account div.xg_module_body ul li a.xg_sprite:hover {padding-left:2em;text-shadow:2px 6px 3px #CCC;-webkit-transition:all 2.5s ease-out;-moz-transition:all 2.5s ease-out;}

taking the above code and reversing the colors for a light color background caused an unexpected effect the opticle illusion that the link floatred fo\rward off of the page slightly

div.xj_user_info div#xg_module_account div.xg_module_body ul li a.xg_sprite {text-shadow:3px 2px 1px #ccc;}
div.xj_user_info div#xg_module_account div.xg_module_body ul li a.xg_sprite:hover {padding-left:2em;text-shadow:2px 6px 3px #000;-webkit-transition:all 2.5s ease-out;-moz-transition:all 2.5s ease-out;}

try that on a light background and see for yourself

[classic]

(thanks)

[soaringeagle]

your welcome..i do like the more subdued second version better

[Regi]

Nice.. Good work King!

[soaringeagle]

thnx  simple but fun :)

i'll try to add another cool tip later this week but been kinda busy lately