Criar Salienta incandescência de Links

Você sabe o que eles dizem ... design está nos detalhes . Quando você está criando um site, existem oportunidades não faltam para se concentrar em pequenos detalhes para melhorar visualmente a experiência. Neste tutorial, vamos mostrar como criar vínculos com sublinha que "brilho".

1. Photoshopping Glow a: GIF animado

Abra um documento novo Photoshop. Faça-1px de altura. Tecnicamente, nós poderíamos fazer isso com o único documento 1px de largura também, mas para torná-lo mais fácil ver o que estamos fazendo, este exemplo é 15px de largura. Zoom para que você possa ver melhor, e abrir a janela> paleta Animação.

Encha sua área do documento com a sua cor de brilho desejado, eu usei um vermelho escuro aqui. Também certifique-se que a camada é desbloqueado na paleta Janela> Camadas. Se for bloqueado, basta clicar duas vezes para desbloquear. Agora clique na seta para a Camada 1 na paleta de animação e clique no pequeno cronómetro ao lado de Opacity.

Agora arraste a seta azul no topo da paleta de animação frente maneiras. Não muito longe ... quanto mais você puxa-o mais lento o seu brilho. Você pode experimentar com a cronometragem. Com o ponteiro do timeline agora pela frente uma forma, ajustar a opacidade de sua camada na paleta Camadas para baixo a zero (0). Você deverá ver um novo diamante aparecem na linha do tempo mostrando-lhe a opacidade mudou. Entre estes dois diamantes agora, essa camada irá automaticamente "tween" entre essas duas opacidades, criando uma transição gradual entre 100 e transparência de 0%.

Agora, mova o ponteiro do cronograma frente novamente o amound mesmo que você fez antes, e ajustar a opacidade até 100. É isso aí! Agora você tem uma animação que vai fade-out e fade-in dessa linha minúscula.

Agora, "Save for Web & Devices" (no menu File). Certifique-se de escolher uma das opções GIF (este é o único formato gráfico que suporta animação). Na parte inferior direita, certifique-se de escolher "Forever", como a opção de loop.

Salve o arquivo como "brilho underline.gif" na pasta de imagens do diretório do seu projeto web.

Aqui é o produto final:

2. A Markup

Por razões de tutorial, vamos aplicar classes exclusivas para os nossos links brilho-y. Aqui está um exemplo com n links em que:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a class="glow-hover" href="#">this link underline glows on hover</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <a href="#" class="glow">this link glows all the time</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

Notem que há duas ligações neste número, uma com uma classe de "brilho hover" e um com uma classe de "brilho". Este é apenas para ilustrar dois diferentes possibilidades. A classe hover brilham faremos a brilhante sublinhar só aparecem quando o vínculo é rolada. A classe brilho teremos a brilhante sublinhar estar lá o tempo todo.

Se você usar isso em produção real, você pode querer considerar não usar classes específicas, mas apenas a aplicação da presente a todos os estilos diretamente âncora (a) elementos. Ainda mais esperto, aplicando-as apenas para ancorar elementos em seu conteúdo áreas principais pode ser uma boa idéia, então você não consegue sublinha brilhante onde você não quiser!

3. A CSS

Para o nosso "brilho" da classe, que aplicam o direito de imagem de fundo para a classe, garantindo que se alinha ao fundo e se repete ao longo do eixo-x. Como os elementos de referência são elementos inline, isso vai funcionar mesmo que a ligação é rompida por várias linhas, o que é ótimo.

Para o nosso "hover brilho" da classe, que se aplicam somente a imagem de fundo sobre a: hover pseudo-classe (mas na moda exatamente o mesmo), que só vai fazer a brilhante sublinhar os links aparecem quando está sendo sobrevoavam.

 a   { color: #3366cc; text-decoration: none; } .glow   { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } .glow:hover  { color: #3366cc; } .glow-hover:hover { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } 

Exemplo

Para viver um exemplo rápido para ver esses links em ação, clique aqui .