Como o efeito de sobreposição somente de CSS com o Box-Shadow

Sobreposições de conteúdo são uma parte importante do design moderno da web. Eles te ajudam esconder um elemento em uma página da Web e, mais tarde, com a aprovação do usuário - revelar isso, e exibir informações ou controles extras, como botões por trás.

Uma sobreposição típica é semitransparente, com um cor de fundo sólido (geralmente preto), e há alguns textos ou botões para os usuários verem ou interagirem. Após a interação (clicando ou pairando) ocorrer, a sobreposição é removido e revela o conteúdo abaixo dela.

Neste artigo, vamos dar uma olhada em como adicione sobreposição colorida a imagens usando CSS puro. Você pode ver o resultado final na demonstração abaixo. Passe as imagens para fazer as sobreposições revelarem os pokemons. Embora este artigo discuta imagens, a técnica apresentada pode ser aplicada com segurança a outros tipos de conteúdo (como blocos de texto).

Evite adicionar elementos HTML extras

As sobreposições são frequentemente criadas por posicionando um elemento HTML extra com um opacidade valor menor que 1 logo acima do elemento a ser coberto. O problema é que essa técnica envolve o uso de um extra elemento (ou pseudo-elemento) para a sobreposição.

Se você não é um pedante de tamanho HTML, ter um elemento extra para overlay provavelmente não é grande coisa, pois provavelmente não sobrecarregará muito a largura de banda de qualquer rede. No entanto tendo separado regras de estilo para elementos e suas sobreposições ainda prejudicam a legibilidade e a facilidade de manutenção do CSS.

Para manter seu código em ordem e não para atrapalhar seu esquema de HTML, é uma opção melhor usar uma solução somente CSS.

Criar sobreposição com Sombra da caixa

Então, como você pode realmente criar uma sobreposição somente de CSS? Com a ajuda do Sombra da caixa Propriedade CSS. A caixa-sombra é perfeita para este trabalho, uma vez que o que é uma sobreposição, mas uma sombra escura projetada sobre um elemento?

A caixa de sombra tem um valor de propriedade chamado inserir, que faz com que a sombra apareça para dentro do quadro da caixa.

Uma caixa-sombra embutida com um tamanho de sombra metade ou mais da metade da largura e altura do elemento, cria uma sombra que cobre o inteira elemento.

 .caixa largura: 200px; altura: 200 px; box-shadow: green 0 0 0 inserção de 100px;  

Desde overlays geralmente tem alguma transparência, você precisa adicioná-lo à sombra da caixa também. Isso pode ser feito usando o rgba () função para cor de sombra.

o rgb porção de rgba, representa os valores dos canais de cor vermelha, verde e azul, enquanto uma representa o canal alfa, qual é responsável pela transparência.

Para o canal alfa, um valor de 1 cria um cor opaca, enquanto 0 cria um cor totalmente transparente.

Atribuindo um valor entre 0 e 1 ao canal alfa do valor de cor rgba da sombra da caixa, você pode criar uma sobreposição semitransparente.

Crie o código para a demonstração

Nossa demonstração mostrará as imagens e nomes de diferentes pokemons. Aqui só vamos criar o código para o Bulbasaur, o primeiro pokemon na demo, já que os outros são feitos da mesma maneira (no Codepen você pode verificar o código para eles também).

HTML

Para o HTML, precisamos apenas crie uma caixa ao qual vamos adicionar todo o resto com CSS.

CSS

No CSS abaixo, o .pokemon elementos exibem as imagens do pokemon eo .pokemon :: depois pseudo-elementos carregam o nome do pokemon.

Desde o Sombra da caixa propriedade pode ter vários valores a fim de renderizar várias sombras, além da sombra de sobreposição, eu também adicionei outras sombras de cinza ao .pokemon e .pokemon: hover elementos para estética.

 / * imagens de pokemon * / .pokemon largura: 200px; altura: 200 px; / * conteúdo central usando flex box * / display: flex; justificar-conteúdo: centro; itens de alinhamento: centro; / * sobreposição * / box-shadow: 0 0 0 100px inserção, 0 0 5px cinza; / * transição de hover-out * / transição: box-shadow 1s;  / * nomes de pokemon * / .pokemon :: after width: 80%; altura: 80%; display: bloco; fonte: 16pt 'bookman old syle'; cor branca; borda: 2px sólido; texto-alinhar: centro; / * conteúdo central usando flex box * / display: flex; justificar-conteúdo: centro; itens de alinhamento: centro; / * pairar fora da transição * / transição: opacidade 1s, 5s;  / * revela a imagem do pokemon em hover * / .pokemon: hover transition: box-shadow 1s; box-shadow: 0 0 0 5px inserção, 0 0 5px cinza, 0 0 10px inserção cinza;  / * oculta o nome do pokemon no hover * / .pokemon: hover :: after transição: opacidade .5s; opacidade: 0;  

Quando o .pokemon elementos são pairados, sua caixa-sombra precisa mudar para revelar a imagem por trás.

Você pode ver que o .pokemon: hover selector obtém uma nova box-shadow que remove a sobreposição, e o .pokemon: hover :: after selector esconde o nome do pokemon usando o opacidade propriedade.

Você também deve ter notado ausência de valores de cor nas sombras da caixa de sobreposição no .pokemon e .pokemon: hover regras de estilo. A cor da sombra da sobreposição dos pokemons individuais precisa ser especificada em suas próprias regras de estilo separado, como eles são todos diferentes uns dos outros.

Como Sombra da caixa não tem nenhuma propriedade de longhand, você não pode definir sua cor de sombra individualmente com algo parecido, caixa-sombra-cor; em vez disso - usamos o cor propriedade.

Por padrão, quando você dá um valor para o cor propriedade, esse valor é aplicado para a fronteira, o contorno e as cores caixa-sombra também. Então, você pode simplesmente usar o cor propriedade para adicionar cor à sombra da caixa.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * valor de cor utilizado para a cor da sombra da caixa * / cor: rgba (71, 121, 94, 0,9);  #bulbasaur :: após / * nome do pokemon * / content: 'Bulbasaur';  

A cor da sombra de sobreposição usa o acima mencionado rgba () função com 0.9 para o valor alfa para tornar a sobreposição transparente.

Além da cor da sombra da caixa de sobreposição, o CSS acima também adiciona as regras que são individuais para cada pokemon - a imagem como imagem de fundo e o nome.

E isso é tudo, estamos prontos com a nossa superposição de imagem colorida somente para CSS. Dê uma olhada no código de todos os pokemons na caneta abaixo.