domingo, 6 de setembro de 2015

Efeito Hover

Parece nome de filme apocalíptico ou de política americana, mas apesar desta ser curta e rápida, como o próprio nome estimula, causa de fato um 'efeito' muito interessante. A ideia é simples, mostrar uma borda sombreada sobre um controle, tipo uma imagem, quando esta possuir um comportamento de botão. E o porque desta frescura toda? simples, para que pareça de fato um botão, que cause a sensação de que ocorre alguma coisa quando pressiona-se a tal imagem, precisamos destacá-la através de alguma ação do usuário.

A ação que escolhemos é o mouse sobre a imagem, que em CSS significa HOVER, e o código para se programar isso é simples, mas como acoplar esta ação em Genexus? Simples também, mas meio esquisito.

Ja haviamos tratado do hover anteriormente Efeito Click em Botão, desta vez estamos usando uma abordagem com classes do Genexus Evolution 3.

Construindo as Classes

Sim precisamos de duas classes para produzir este efeito, e como estamos tratando de imagem, a ideia é uma que seja associada a imagem e outra que represente a ação HOVER. Como fazer isso? No editor de temas incluir uma classe do tipo Image e outra na área Custom com o mesmo nome, porém com um :hover.


No nosso exemplo programamos uma classe Image chamada ImageButton, e outra em Custom com o nome ImageButton:hover. Veja na imagem acima como ficaram as duas classes.

Em seguida basta incluir o código hover na classe customizada, ou seja em ImageButton:hover,  que programamos segundo o código gerado por um editor de bordas que está na internet http://www.cssmatic.com/box-shadow.

Este editor gerou o seguinte código:

-webkit-box-shadow: 0px 0px 12px 3px rgba(207,72,119,1);
-moz-box-shadow: 0px 0px 12px 3px rgba(207,72,119,1);
box-shadow: 0px 0px 12px 3px rgba(207,72,119,1);


Este código incluímos na propriedade Custom Properties da classe ImageButton:hover


Resultado

Para usar isso defina a classe ImageButton ( não a classe hover ) na imagem que quer causar o efeito.


O resultado não poderia ser mais interessante, pois uma imagem estática e meio sem graça, ganha um efeito legal quando o mouse está sobre ela, destacando que quando a mesma for pressionada algo ocorrerá.