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