Menu horizontal com gradient

 Fal ai gente, aqui é o Anon e hoje venho trazer mais um tutorial para vocês! Bem, no tutorial de hoje vou estar disponibilizando um menu horizontal com gradient (CSS3). Confira logo abaixo.


NOTA: Esse menu só é visualizado com o navegador Google Chrome

#menu-g {
margin:0px 0 0 0px;/*---Edite o posicionamento---*/
 }

#menu-g a{
background-image: -webkit-gradient( linear, left top, left bottom, from(#XXX), to(#XXX));/*---Edite as cores---*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  font-family: Impact;/*---Edite a fonte---*/
  font-size: 27px;/*---Edite o tamanho da fonte---*/
  cursor: pointer
 }

#menu-g a:hover{
background-image: -webkit-gradient( linear, left top, left bottom, from(#XXX), to(#XXX));/*---Edite as cores---*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  font-family: Impact;/*---Edite a fonte---*/
  font-size: 27px;/*---Edite o tamanho da fonte---*/
  cursor: pointer
 }
Para usar o menu você irá usar o seguinte código:

<div id='menu-g'><a href='LINK'>Edite</a> | <a href='LINK'>Edite</a></div>
Na primeira parte do menu "#menu-g{" iremos definir o posicionamento do mesmo. Na segunda parte do menu "#menu-g a{" iremos definir cor, fonte e tamanho da fonte dos links antes de passar o cursor do mouse por cima. E por fim, na terceira arte, "#menu-g a:hover{" irmos definir as cores, fonte e tamanho da fonte quando passarmos o cursor do mouse por cima.

NOTA: É importante que não use a propriedade "text-shadow" nesse menu, pois da um efeito estranho. A sombra fica por cima do menu (tenso o.O).