TEMA: Botões
ARTIGO: Novo
VERSÃO: PRESTASHOP 1.5.x | WEBACAPPELLA 4
Hoje vou passar um macete que fica muito legal em sites de eventos noturnos, balada, cantores, djs.
Um site desta categoria eu preferencialmente prefiro fazer um site em tons escuros.
Sempre é bom colocarmos no lugar de quem está visitando um site. Por exemplo: se visito um site sobre uma boate e o site é todo branco meu subconsciente não assimila aquele site com o que ele propõe. .....Mas se eu entro num site escuro, com refletores, um musica de fundo. As chances de querer ir aquele local são muito maiores.
O macete de hoje é muito simples, causa uma aparência bacana, com movimentos e não pesa o site.
O interessante que pode ser usado tanto como uma imagem fixa quanto em botões.
Se trata de utilizar gifs animados com o fundo transparente.
1) Em nosso primeiro exemplo, supomos um site de uma boate que fica aberta 24 horas. Primeiramente não vou dizer "Aberto 24 horas" pois soa como farmácia ou casa de conveniência. Vou usar o termo "24 horas no ar". E para causar uma chamada em que chama a atenção do visitante do site. Vou fazer algo tipo um neon.
Utilizando um programa da sua escolha crie todas as figuras que farão parte da sua animação:
Criei as seguintes imagens e as exportei como png com fundo transparente. Nem precisa dizer que são 3 imagens cada qual com seu nome... rs. .
Depois é acessar o site: http://gifmaker.me/ . (Adorei essa ferramenta on line) e fazer o upload das Imagens.
O que eu achei muito interessante nesta ferramenta é que você possui inúmeras opções de configurar como seu gif animado vai proceder. Velocidade entre os frames, velocidade da animação, Quantos loops terá o gif ou se vai ter infinitos loops e até mesmo inserir uma url de uma música a tocar e até em quantos segundos ela deve começar a tocar. Sem dizer que ele mantém seu gif transparente.
No do exemplo ficou assim:
Tudo bem que não ficou igual um neon, pois não fiz a edição muito bacana. Só mesmo para dar um exemplo.
Agora basta inserir a imagem de gif no site que e ver o efeito mantendo o fundo do gif transparente. Faça você um de exemplo e veja como pode ser útil.
2) Em nosso segundo exemplo, o que eu acho ainda mais interessante, é utilizar este recurso com botões no Webacappella.
Vamos criar então um botão em que redireciona o visitante do site para um canal do Youtube. Este botão ficará piscando e quando passar o mouse por cima ele vai parar em uma cor desejada.
Neste caso vou trabalhar com um gif animado e uma imagem. Lembrando que todas as imagens utilizadas tanto para a criação do gif quanto a imagem separada devem possuir as mesmas medidas: altura x largura.
Então criei e exportei como png transparente as seguintes imagens:
As duas primeiras (amarela e verde) será usada para o guif animado, e a terceira com vermelho será usada como a imagem fixa ao passar o mouse.
Como já dito anteriormente criarei meu gif animado.
Agora no Webacappella insiro um botão definindo a largura e altura conforme a do gif.
O tipo do botão será uniforme
O canto será sem arredondamento
Na opção Botão > Aparência do botão e na aba normal . Removo todas as cores tanto do fundo quanto borda e etc e insiro a imagem do arquivo gif.
Na opção Botão > Aparência do botão e na aba mouseover. Removo também todas as cores tanto do fundo quanto borda e etc e insiro a imagem do logo original em png do Youtube. A terceira imagem citada acima
Na opção Botão > Aparência do botão e na aba ativo. Desmarcamos a opção Mostrar estado "ativo"
Ainda na ferramenta Botão , na opção de Texto eu deixo o texto em branco.
Insira agora a url para o redirecionamento e pronto. Tá pronto um botão diferente, animado e que não pesa o seu site.
Faça você mesmo e veja pelo WebAcappella como ficou muito bacana
Infelizmente até a data atual o WA RC não permite inserirmos uma imagem no botão, pelo menos eu não encontrei. Se alguém souber passa a dica. Então esse artigo serve só pro WA4
