Início Dicas e tutoriais de CSS3 Efeitos no Background Efeitos no background – Sweep to Right, Left, Bottom e Top – CSS3
Efeitos no Background

Efeitos no background – Sweep to Right, Left, Bottom e Top – CSS3

Efeitos no background – Sweep to Right, Left, Bottom e Top – CSS3

Criando efeitos no background de um elemento durante o evento “on hover” utilizando CSS 3.

Os exemplos utilizando o pseudo elemento :before junto com as propriedades transform e transition-duration para criar efeitos interessante no background de um elemento, veja os exemplos:

Exemplos efeitos no background

Primeiro, Sweep to Right:

Passe o mouse

Sweep to Left:

Passe o mouse

Sweep to Top:

Passe o mouse

Sweep to Bottom:

Passe o mouse

 

CSS do Sweep to Right

.sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-right:hover, .sweep-to-right:focus, .sweep-to-right:active {
  color: white;
}
.sweep-to-right:hover:before, .sweep-to-right:focus:before, .sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

CSS do Sweep to Left

.sweep-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-left:hover, .sweep-to-left:focus, .sweep-to-left:active {
  color: white;
}
.sweep-to-left:hover:before, .sweep-to-left:focus:before, .sweep-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

CSS do Sweep to Top

.sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-top:hover, .sweep-to-top:focus, .sweep-to-top:active {
  color: white;
}
.sweep-to-top:hover:before, .sweep-to-top:focus:before, .sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

CSS do Sweep to Bottom

.sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-bottom:hover, .sweep-to-bottom:focus, .sweep-to-bottom:active {
  color: white;
}
.sweep-to-bottom:hover:before, .sweep-to-bottom:focus:before, .sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

CSS reduzido

Código CSS reduzido dos 4 efeitos para você incluir em seu projeto

.sweep-to-bottom,.sweep-to-left,.sweep-to-right,.sweep-to-top{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.sweep-to-right{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-right:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sweep-to-bottom:before,.sweep-to-left:before{-webkit-transition-timing-function:ease-out;content:"";z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1}.sweep-to-right:active,.sweep-to-right:focus,.sweep-to-right:hover{color:#fff}.sweep-to-right:active:before,.sweep-to-right:focus:before,.sweep-to-right:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.sweep-to-left{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-left:before{position:absolute;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}.sweep-to-left:active,.sweep-to-left:focus,.sweep-to-left:hover{color:#fff}.sweep-to-left:active:before,.sweep-to-left:focus:before,.sweep-to-left:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.sweep-to-bottom{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-bottom:before{position:absolute;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}.sweep-to-bottom:active,.sweep-to-bottom:focus,.sweep-to-bottom:hover{color:#fff}.sweep-to-bottom:active:before,.sweep-to-bottom:focus:before,.sweep-to-bottom:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1)}.sweep-to-top{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-top:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sweep-to-top:active,.sweep-to-top:focus,.sweep-to-top:hover{color:#fff}.sweep-to-top:active:before,.sweep-to-top:focus:before,.sweep-to-top:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1)}

 

Tags: Efeitos no background, css3, efeitos de css
Tags: css3efeitos de cssEfeitos no background
Deixar um comentário

Conteúdo relacionado

Post Recentes

Bloquear .env e .git no nginx: as regras que ainda deixam o arquivo vazar

Negar /.env no nginx parece resolvido até alguém pedir /wp-content/uploads/.env ou backup.sql. As regras que testei e os furos que…

12 horas atrás

Canonical errado no Yoast: corrigindo pelo filtro wpseo_canonical

O Search Console marca suas páginas 2, 3 e 4 como alternativas da página 1? Ajuste a tag canônica do…

16 horas atrás

Layout XML do Magento 2: remover bloco de módulo de terceiro

Um módulo de terceiro plantou um banner no topo da loja e você não quer desinstalar nada: tire o bloco…

1 dia atrás

Restaurar dump do Magento 2 em outro servidor: trocar a base_url no SQL

Importou o banco de produção e o site pula para o domínio antigo? Rode o UPDATE em core_config_data, limpe o…

2 dias atrás

Criar exceção customizada em PHP: quando estender Exception compensa

Seu catch trata pedido inexistente e banco fora do ar do mesmo jeito. Veja como criar exceção customizada em PHP…

3 dias atrás

DataProvider Magento 2: form do admin abre com campos vazios ao editar

O form do admin salva mas abre em branco na edição: veja o getData() indexado pelo id da entidade e…

4 dias atrás