Com que frequência você acessa o CSS background-size propriedade? Se você é como eu - e provavelmente muitos outros profissionais de front-end - geralmente é quando você background-size: cover uma imagem para preencher o espaço de um elemento inteiro.
Bem, fui apresentado a um desafio interessante que exigia um dimensionamento de plano de fundo mais avançado: listras de plano de fundo que fazem a transição ao passar o mouse. Verifique isso e passe o cursor sobre ele:
Há muito mais acontecendo lá do que o tamanho do fundo, mas esse foi o truque que eu precisava para fazer a transição das listras. Pensei em mostrar como cheguei lá, não apenas porque acho que é um efeito visual muito bom, mas porque exigiu que eu fosse criativo com gradientes e modos de mesclagem que acho que você pode gostar.
Vamos começar com uma configuração muito básica para manter as coisas simples. Estou falando de um único
no HTML com o estilo de um quadrado verde:
div {
width: 500px;
height: 500px;
background: palegreen;
}Configurando as listras de fundo
Se sua mente foi direto para um gradiente linear CSS quando você viu essas listras, já estamos na mesma página. Não podemos fazer exatamente um gradiente repetitivo neste caso, pois queremos que as listras ocupem quantidades desiguais de espaço e façam a transição, mas podemos criar cinco listras encadeando cinco planos de fundo em cima de nossa cor de plano de fundo existente e colocando-os no topo -à direita do contêiner:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}Fiz listras horizontais, mas também podemos ficar verticais com a abordagem que estamos abordando aqui. E podemos simplificar um pouco isso com propriedades personalizadas:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}Assim, o --gt valor é o gradiente e --n é uma constante que estamos usando para deslocar as listras para baixo, de modo que fiquem deslocadas verticalmente. E você deve ter notado que não defini um gradiente verdadeiro, mas sim listras pretas sólidas no linear-gradient() function — isso é intencional e veremos por que fiz isso daqui a pouco.
Mais uma coisa que devemos fazer antes de prosseguir é evitar que nossos antecedentes se repitam; caso contrário, eles irão ladrilhar e preencher todo o espaço:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}Nós poderíamos ter definido background-repeat no background taquigrafia, mas decidi quebrá-la aqui para manter as coisas fáceis de ler.
Compensando as listras
Tecnicamente, temos listras, mas é muito difícil dizer porque não há espaçamento entre elas e elas cobrem todo o contêiner. É mais como se tivéssemos um quadrado preto sólido.
É aqui que podemos usar o background-size propriedade. Queremos definir a altura e a largura das listras e a propriedade oferece suporte a uma sintaxe de dois valores que nos permite fazer exatamente isso. E podemos encadear esses tamanhos separando-os por vírgula da mesma forma que fizemos em background.
Vamos começar simples, definindo as larguras primeiro. Usando a sintaxe de valor único para background-size define a largura e padroniza a altura para auto. Estou usando valores totalmente arbitrários aqui, então defina os valores para o que funciona melhor para o seu design:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}Se você estiver usando os mesmos valores que eu, obterá isto:
Não parece exatamente que definimos a largura de todas as listras, não é? Isso é por causa do auto comportamento de altura da sintaxe de valor único. A segunda faixa é mais larga que as outras abaixo dela e as cobre. Devemos definir as alturas para que possamos ver nosso trabalho. Todos devem ter a mesma altura e podemos realmente reutilizar nossos --n variável, novamente, para manter as coisas simples:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}Ah, muito melhor!
Adicionando lacunas entre as listras
Esta é uma etapa totalmente opcional se o seu design não exigir espaços entre as listras, mas o meu exigiu e não é muito complicado. Mudamos a altura de cada faixa background-size um pouquinho, diminuindo o valor para que não preencham todo o espaço vertical.
Podemos continuar a usar nosso --n variável, mas subtrair uma pequena quantidade, digamos 5px, Utilizando calc() para conseguir o que queremos.
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);Isso é muita repetição que podemos eliminar com outra variável:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Mascarar e misturar
Agora vamos trocar o palegreen cor de fundo que usamos para fins visuais até este ponto para o branco.
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}Um padrão preto e branco como este é perfeito para mascarar e misturar. Para fazer isso, primeiro vamos envolver nosso
em um novo contêiner pai e introduza um segundo
sob ele:
Faremos uma pequena refatoração de CSS aqui. Agora que temos um novo contêiner pai, podemos passar o fixo width e height propriedades que estávamos usando em nosso
bem ali:
section {
width: 500px;
height: 500px;
} Também vou usar o CSS Grid para posicionar os dois
elementos uns sobre os outros. Este é o mesmo truque que Temani Afif usa para criar seu galerias de imagens super legais. A ideia é que coloquemos os dois divs sobre o contêiner completo usando o método grid-area propriedade e alinhe tudo em direção ao centro:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Agora, verifique isso. A razão pela qual usei um gradiente sólido que vai de preto a preto anteriormente é para nos preparar para mascarar e misturar os dois
camadas. Isso não é um verdadeiro mascaramento no sentido de que estamos chamando o mask propriedade, mas o contraste entre as camadas controla quais cores são visíveis. A área coberta pelo branco permanecerá branca e a área coberta pelo preto vazará. Documentação do MDN sobre modos de mesclagem tem uma boa explicação de como isso funciona.
Para fazer isso funcionar, aplicarei o gradiente real que queremos ver no primeiro
ao aplicar as regras de estilo de nossa inicial
no novo, usando o :nth-child() pseudo-seletor:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Se pararmos aqui, não veremos nenhuma diferença visual em relação ao que tínhamos antes. Isso porque ainda não fizemos a mistura real. Então, vamos fazer isso agora usando o screen modo de mistura:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Usei uma cor de fundo bege na demonstração que mostrei no início deste artigo. Esse tipo ligeiramente mais escuro de coloração esbranquiçada permite que um pouco de cor se espalhe pelo resto do fundo:
O efeito de pairar
A última peça desse quebra-cabeça é o efeito de foco que amplia as listras para a largura total. Primeiro, vamos escrever nosso seletor para ele. Queremos que isso aconteça quando o contêiner pai (
no nosso caso) é pairado. Ao passar o mouse, mudaremos o tamanho do fundo das listras contidas no segundo
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} vamos querer mudar o background-size das listras em toda a largura do contêiner, mantendo a mesma altura:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Isso “ajusta” o fundo à largura total. Se adicionarmos um pouco transition para isso, vemos as listras se expandirem ao passar o mouse:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Aqui está a demonstração final mais uma vez:
Eu apenas adicionei texto lá para mostrar como seria usar isso em um contexto diferente. Se você fizer o mesmo, vale a pena verificar se há contraste suficiente entre a cor do texto e as cores usadas no gradiente para atender Diretrizes WCAG. E já que falamos brevemente sobre acessibilidade, vale a pena considerando as preferências do usuário para movimento reduzido quando se trata do efeito hover.
Isso é um embrulho!
Muito legal, certo? Eu certamente penso assim. O que eu gosto nisso também é que é bastante sustentável e personalizável. Por exemplo, podemos alterar a altura, as cores e a direção das listras alterando alguns valores. Você pode até variar mais algumas coisas - como cores e larguras - para torná-lo ainda mais configurável.
Estou realmente interessado se você tivesse abordado isso de uma maneira diferente. Se sim, compartilhe nos comentários! Seria legal ver quantas variações podemos coletar.
