Pular para o conteúdo principal

CSS Hover animate.

-

Em algum momento você já teve a necessidade de criar uma animação ou algum efeito em uma imagem ao passar o mouse.

Para facilitar o trabalho o Hover Animate criou um pequeno arquivo CSS que atende essa necessidade.
hover animate


É recomendado que junto ao Hover Animate seja utilizado algum framework para tornar o teu site responsivo.
OBS: o estilo e cores tanto de letra quanto de botão é de responsabilidade sua.

Confira.
https://diegomoralesnavarro.github.io/-hover-animate.github.io/dist/index.html


Comentários

Postar um comentário

Postagens mais visitadas deste blog

Formatar o número do telefone no campo input com JavaScript

-
Imagem
  A formatação do campo telefone é muito importante para quem salva o valor recebido no banco de dados ou até mesmo por uma questão visual. Um campo input tipo tel sem formatação como por exemplo em um formulário pode ficar estranho visualmente e atrapalhar a empresa na organização por chegar bagunçado ou com falta do número de DDD. Vou mostrar como criar um campo input que consegue receber o numero de telefone fixo e telefone celular formatando com DDD e caráter especial para separação. Formatando o campo input para telefone fixo e telefone celular Para criar essa formatação vamos utilizar o “.replace” junto com a “expressão regular”, para receber o valor substituindo e organizando baseado a expressão. Preparando o HTML com parâmetro JS Coloque o seguinte código abaixo em seu html <input type="tel" maxlength="14 required="" data-js="phone">   Observe que é um campo tipo TEL que recebe um limite de 14 caracteres com preenchime
Leia mais

Colocar estilo no input range.

-
Imagem
Estilo no Range. Criar um estilo no input tipo range é simples, vamos criar uma class chamada de ".estilo" com esta class vamos edita o background e também a bolinha que se movimenta. Antes de inciar o estilo será necessário criar o HTML . <input type="range" min="0" max="100" value="50" class="estilo" id="valor">  <br>  <p id="resultado">.</p> No final vamos usar o ID resultado para informar o valor. Criando o estilo CSS Primeiro o estilo do background. Aqui você vai manter o width como 100%, mas pode alterar o height e o border. .estilo {     -webkit-appearance: none;     background: #d3d3d3;     outline: none;     width: 100%;     height: 20px;     border-radius: 9px;    } Segunda parte criar a estilo da bolinha. .estilo::-webkit-slider-thumb {     -webkit-appearance: none;     appearance: none;     width: 25px;     he
Leia mais

Remover e Inserir um atributo na Tag HTML usando JavaScript

-
Imagem
 Em algum momento você já ser deparou com a necessidade de remover um atributo ou adicionar para realizar uma função especifica usando o JavaScript. Vou mostrar de forma simples e rápida como realizar essa atividade usando removeAttribute e setAttribute.   Usando removeAttribute e setAttribute O que é um atributo no HTML? Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação). Removendo um atributo da Tag HTML Para demover um atributo deve usar um comando JavaScript chamado removeAttribute que remove um atributo de um elemento específico. Veja o exemplo de Tag HTML onde será removido o atributo href e class. <a id="botao" href="www.google.com.br" class="bt">Visitar google</a>   Para remover usando o JS é necessário localizar o ID da Tag para aplicar o  removeAttr
Leia mais