As sobreposições de conteúdo são uma grande parte de como os sites são feitos hoje. Eles permitem que você mostre novamente com mais informações ou controles por trás dele, como botões.
Uma sobreposição típica é semitransparente e tem uma cor de fundo sólida, que geralmente é preto. Ele também possui texto ou botões que os usuários podem ver ou usar. Após a interação (clicar ou passar o mouse), a sobreposição desaparece e o conteúdo abaixo é mostrado.
Neste artigo, veremos como usar CSS puro para adicionar uma sobreposição colorida a uma imagem. Na demonstração abaixo, você pode ver como tudo ficou. Mova o mouse sobre as imagens para ver o Pokémon nas sobreposições. Mesmo que este post seja sobre imagens, a técnica que ele mostra pode ser usada com segurança com outros tipos de conteúdo, como blocos de texto.
Como fazer efeito de sobreposições somente CSS com Box-Shadow
Criando sombras em camadas com CSS box-shadow
Você pode empilhar várias sombras umas sobre as outras, separando seus valores com vírgulas. Essa técnica pode ser usada para criar sombras interessantes que se misturam suavemente na página. Observe que o valor de propagação não é adicionado-não é realmente necessário neste caso, mas, em última análise, cabe a você decidir como sua sombra de caixa se parece.
Se definirmos o deslocamento e o raio de desfoque para 0px e adicionar um valor de dispersão a uma sombra, adicionaremos uma borda à caixa. Como essa borda é tecnicamente uma sombra, porque nenhum espaço extra é ocupado pela caixa no elemento pai.
Criando sombras neon com CSS box-shadow
Sombras da vida real geralmente são preto ou cinza, com quantidades variáveis de opacidade. Mas e se as sombras tivessem cores?
No mundo real, você obtém sombras coloridas mudando a cor da fonte de luz. Não há uma fonte de luz “real” equivalente a mudar em um site, então você obtém esse efeito neon alterando o valor da cor na caixa-sombra.
Criando sombras neumórficas com CSS box-shadow
Este efeito é único e visualmente agradável. Veio do skeuomorfismo, que tentou replicar objetos exatamente como eles apareceriam na vida real. Existem alguns exemplos no artigo vinculado sobre skeuomorfismo
Os dois primeiros efeitos que precisamos criar lidam com componentes planos da web que parecem flutuar acima da página e projetar sombras no plano de fundo. Esse efeito faz com que esses componentes pareçam ter saído da página.
Perguntas frequentes
Como você sobrepõe uma caixa em CSS?
Especifique a largura e a altura do “contêiner”aula. Defina a posição como “relativa” e adicione a propriedade de margem. Defina a largura e a altura da classe “caixa” para “100%”. Especifique a posição com o valor “absoluto”. … Estilize a classe “overlay” usando as propriedades z-index, margin e background.
Como obtenho uma caixa de sombra apenas no CSS inferior?
Para exibir a sombra na parte inferior da imagem, a propriedade “box-shadow” é usada. Para esse propósito, offset-x é definido como “0”, offset-y é qualquer valor positivo e a cor que você deseja exibir também é definida.
O CSS suporta box shadow?
A propriedade CSS box-shadow adiciona efeitos de sombra ao redor da moldura de um elemento. Você pode definir vários efeitos separados por vírgulas. Uma sombra de caixa é descrita pelos deslocamentos X e Y em relação ao elemento, desfoque e raio de propagação e cor.