Criar Salienta Glowing para Web Links

Você sabe o que eles dizem ... design está nos detalhes. Quando você está projetando um Web site, há oportunidades abundam se concentrar em pequenos detalhes para melhorar a experiência visual. Neste tutorial, vamos mostrar como criar ligações com sublinha que "brilho".

1. Photoshopping o Glow: GIF animado

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

Encha a sua área de documento com o seu brilho de cor desejada, eu usei um vermelho escuro aqui. Certifique-se também a camada é desbloqueado na Janela> Paleta Camadas. Se for bloqueado, basta clicar duas vezes para desbloquear. Agora clique na seta para a Layer 1 na paleta de animação e clique no cronômetro pouco ao lado de Opacity.

Agora arraste a seta azul no topo da paleta de animação para a frente uma maneiras. Não muito longe ... quanto mais você puxe-o mais lento o seu brilho. Você pode experimentar com timing. Com o ponteiro do cronograma agora à frente uma maneiras, ajustar a opacidade de sua camada na paleta Camadas a zero (0). Você deverá ver um novo diamante aparecer 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 0% de transparência.

Agora, mova o ponteiro do cronograma à frente novamente o amound que você fez antes, e ajustar a opacidade até 100. That's it! Agora você tem uma animação que vai fade-out e fade-in desta linha minúscula.

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

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

Aqui é o produto final:

2. A marcação

Por razões de tutorial, vamos aplicar classes exclusivas para o nosso brilho ligações y. Aqui está um exemplo com n links na mesma:

<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> 

Repare 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 duas possibilidades diferentes. O brilho da classe hover faremos a brilhante sublinhado só aparecem quando a ligação é rolada. A classe brilho teremos a brilhante sublinham 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 diretamente a todos os estilos de âncora (a) elementos. Ainda mais inteligente, aplicando-lhes apenas para ancorar elementos em suas áreas principais de conteúdo poderá ser uma boa idéia, assim você não conseguir sublinha brilhante onde você não quiser!

3. A CSS

Para o nosso "brilho" de classe, que aplicam o direito de imagem de fundo para a classe, tendo a certeza que se alinha ao fundo e se repete ao longo do eixo-x. Como os elementos âncora são elementos inline, isso vai funcionar mesmo se o link quebra em várias linhas, que é grande.

Para o nosso brilho "hover-class", que só se aplica a imagem de fundo sobre a pseudo: hover classe (mas na forma exatamente a mesma), que só vai fazer a brilhante sublinhado aparecem quando as ligações estão sendo pairava sobre.

 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 um rápido exemplo vivo para ver esses links em ação, clique aqui.