Hover
2.3.1
Uma coleção de efeitos de foco com CSS3 para serem aplicados a links, botões, logotipos, SVG, imagens em destaque e assim por diante. Aplique facilmente aos seus próprios elementos, modifique ou apenas use como inspiração. Disponível em CSS, Sass e LESS.
Demonstração | Tutorial
npm install hover.css --savebower install hover --saveHover.css pode ser usado de várias maneiras; copie e cole o efeito que deseja usar em sua própria folha de estilo ou faça referência à folha de estilo. Em seguida, basta adicionar o nome da classe do efeito ao elemento ao qual deseja aplicá-lo.
Se você planeja usar apenas um ou vários efeitos, é uma boa prática copiar e colar um efeito em sua própria folha de estilo, para que o usuário não precise baixar css/hover.css na íntegra.
Supondo que você queira usar o efeito Grow:
Baixar Hover.css
Em css/hover.css , encontre o Grow CSS (cada efeito é nomeado usando um comentário acima dele):
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}Copie este efeito e cole-o em sua própria folha de estilo.
No arquivo HTML onde você deseja que o efeito apareça, adicione a classe .hvr-grow ao elemento escolhido.
Elemento de exemplo antes de aplicar o efeito Hover.css:
< a href =" # " > Add to Basket a >Elemento de exemplo após aplicar o efeito Hover.css:
< a href =" # " class =" hvr-grow " > Add to Basket a > Nota : A partir da 2.0.0 todos os nomes de classes Hover.css são prefixados com hvr- para evitar conflitos com outras bibliotecas/folhas de estilo. Se estiver usando Sass/LESS, isso pode ser facilmente alterado usando a variável $nameSpace / @nameSpace em scss/_options.scss ou less/_options.less .
Se você planeja usar muitos efeitos Hover.css, você pode consultar toda a folha de estilo Hover.css.
hover-min.csshover-min.css aos arquivos do seu site, em um diretório chamado css por exemplohover-min.css em < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >Alternativamente, você pode adicionar uma referência a uma folha de estilo existente como esta (isso pode ser útil para usuários do WordPress que não conseguem editar HTML):
@import url ( "hover-min.css" );.hvr-grow ao elemento escolhido.Elemento de exemplo antes de aplicar o efeito Hover.css:
< a href =" # " class =" button " > Add to Basket a >Elemento de exemplo após aplicar o efeito Hover.css:
< a href =" # " class =" button hvr-grow " > Add to Basket a >displayPara tornar um elemento "transformável", Hover.css fornece o seguinte a todos os elementos aos quais é aplicado:
display : inline-block;
vertical-align : middle; Caso você queira substituir esse comportamento, remova o CSS acima de Hover.css ou altere a propriedade display do elemento. Certifique-se de declarar a substituição após as declarações Hover.css para que a cascata CSS entre em vigor. Alternativamente, se você estiver usando a versão Sass/LESS do Hover.css, você pode remover/comentar o mixin forceBlockLevel() encontrado em scss/_hacks.scss ou less/_hacks.less .
Para obter mais informações sobre elementos transformáveis, consulte o Módulo CSS Transforms.
Para adicionar um ícone Hover.css, coloque o ícone HTML dentro do elemento ao qual o efeito Hover.css é aplicado. Por exemplo:
No código acima, demos a um elemento de link uma classe de hvr-icon-forward que fará um ícone avançar quando o link for passado. O ícone em si recebe uma classe de hvr-icon para que o Hover.css saiba que este é o ícone que queremos animar. Neste exemplo, nosso ícone é do FontAwesome, que carregamos no da nossa página da web conforme as instruções do FontAwesome, assim:
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >Nota: A partir do Hover.css v2.3.0, você pode usar qualquer método que desejar para adicionar ícones (anteriormente, apenas FontAwesome era compatível imediatamente). Por exemplo, você poderia usar outra biblioteca de ícones ou, em vez disso, usar uma imagem assim:
Aqui, a imagem atuará como o ícone porque tem a classe hvr-icon aplicada a ela e, quando passar o mouse sobre ela, o ícone girará conforme definido pela classe hvr-icon-spin no elemento pai.
A posição do ícone está inteiramente sob seu controle. Você poderia colocá-lo antes do texto, assim:
Ou use CSS personalizado para posicionar o ícone como achar melhor.
O projeto consiste nas seguintes pastas e arquivos:
Outros arquivos dignos de nota incluem:
Muitos efeitos Hover.css dependem de recursos CSS3 como transições, animações, transformações e pseudoelementos, por esse motivo, os efeitos podem não funcionar totalmente em navegadores mais antigos.
Além dos navegadores mencionados acima, Hover.css é compatível com todos os principais navegadores. Consulte caniuse.com para obter suporte completo para muitas tecnologias da web e teste suas páginas da web de acordo. Recomenda-se aplicar efeitos de fallback para navegadores mais antigos, usando CSS compatível com esses navegadores ou uma biblioteca de testes de recursos como Modernizr.
Grunt não é essencial, mas pode acelerar o desenvolvimento. Com o Grunt instalado, execute grunt na linha de comando para configurar um servidor de desenvolvimento acessado em http://127.0.0.1:8000/ ou seu IP local para testes de rede. Com o Grunt em execução, Sass ou LESS serão pré-processados (dependendo se você trabalha na pasta scss ou less ) e os arquivos CSS serão minificados.
Nota: Originalmente o Grunt foi configurado para autoprefixar propriedades CSS, mas para tornar o projeto o mais acessível possível, este não é mais o caso. O mixin Sass/LESS prefixed(property, value) deve ser usado para prefixação do navegador. Consulte Usando Sass/LESS para Desenvolvimento e [Usando LESS para Desenvolvimento].
Sass/LESS não são essenciais, mas podem acelerar o desenvolvimento. Pré-processe Sass/LESS com seu software favorito ou o ambiente fornecido via Grunt.
Sass/LESS é usado no projeto Hover.css para separar vários CSS em arquivos específicos. Cada efeito está dentro de seu próprio arquivo no diretório effects . Hover.css também usa os seguintes arquivos .scss e .less :
Contém hacks (linhas de código indesejáveis, mas geralmente necessárias) aplicados a determinados efeitos. Hacks explicados aqui.
Contém mixins prefixed e keyframes que aplicam os prefixos necessários especificados em _options.scss / _options.less às propriedades e quadros-chave.
As propriedades podem ser prefixadas da seguinte forma:
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); O mixin prefixed recebe a propriedade que você deseja prefixar, seguida de seu valor.
Os quadros-chave podem ser prefixados da seguinte forma:
@include keyframes(my-animation) {
to {
color : red;
}
} O mixin keyframes recebe o nome do quadro-chave, seguido pelo conteúdo usando a diretiva @content.
. keyframes ( my-animation , {
to {
color : red;
}
}); O mixin keyframes recebe o nome do quadro-chave, seguido pelo conteúdo, ambos como argumentos.
Contém opções padrão, várias opções de efeitos e os prefixos do navegador que você gostaria de usar com o mixin prefixed . Por padrão, apenas o prefixo -webkit- é definido como true (devido à maioria dos navegadores não exigirem prefixos agora).
A partir da 2.0.0 , _options também inclui uma opção $nameSpace / @nameSpace que permite alterar o nome com o qual todas as classes são prefixadas. O namespace padrão é hvr .
A opção $includeClasses / @includeClasses por padrão é definida como true e irá gerar todos os efeitos Hover.css sob seus próprios nomes de classe, hvr-grow por exemplo. Caso deseje adicionar as propriedades que compõem os efeitos Hover.css aos seus próprios nomes de classe, defina esta opção como false .
Se você quiser contribuir com seus próprios efeitos, consulte o Guia de Contribuição.
Hover.css é disponibilizado sob licenças pessoais/de código aberto gratuitas ou licenças comerciais pagas, dependendo de suas necessidades. Para comparar licenças, visite a Ian Lunn Design Limited Store e adquira uma licença comercial aqui.
Para uso pessoal/de código aberto, Hover.css é disponibilizado sob uma licença do MIT
Leia a licença completa
Para uso comercial, Hover.css é disponibilizado sob licenças Comercial, Comercial Estendido e Comercial OEM.
Compra | Leia a licença completa
*Com exceção de aplicativos que permitem aos usuários finais produzir aplicativos separados. Consulte a Licença Comercial OEM.
Compra | Leia a licença completa
Caso seu aplicativo permita que os usuários finais produzam aplicativos separados que incorporem o software da Ian Lunn Design Limited, por exemplo, um kit de ferramentas de desenvolvimento, uma biblioteca ou um construtor de aplicativos, você deverá obter uma Licença Comercial OEM. Entre em contato conosco para obter mais informações sobre a Licença Comercial OEM.
Hover.css foi disponibilizado anteriormente sob uma licença MIT para uso comercial e não comercial. Qualquer pessoa que tenha obtido uma licença MIT para uso comercial antes da v2.2.0 (24 de março de 2017) pode continuar a usar as versões Hover.css anteriores à v2.2.0 sob a mesma licença.
Se você quiser atualizar para a versão 2.2.0 ou superior, ou simplesmente mostrar seu suporte ao Hover.css (agradeceríamos muito!), adquira uma licença comercial atualizada. Adquira uma licença comercial.
Ian Lunn é desenvolvedor front-end freelancer e autor de CSS3 Foundations.
Contrate Ian para sites responsivos, sites WordPress, JavaScript, animação e otimização.
