Durante anos minhas sombras pareciam falsas e eu não conseguia descobrir por quê. Eu escreveria box-shadow: 0 5px 10px black, pegue um halo cinza lamacento, suavize-o e siga em frente sentindo-se vagamente insatisfeito O cartão parecia ter um hematoma, não uma sombra Foi só quando comecei a separar os sistemas de design que EU admirava - aqueles onde os cartões parecem flutuar genuinamente - que EU percebi o truque Eles nunca usam uma sombra Eles empilham dois ou três, cada um fazendo um trabalho diferente, e o resultado lê como luz se comportando da maneira como a luz realmente se comporta.
Eu construo interfaces no React e no Tailwind para viver, mantenho um tema de administração do WordPress no WP Adminify, onde as sombras carregam grande parte da hierarquia visual, e construí o Gerador de sombras da caixa CSS no Toolz.dev porque EU me cansei de sintonizar sombras multicamadas à mão em um editor de texto e recarregar para ver o resultado Este guia é tudo o que aprendi sobre o box-shadow propriedade: o que cada valor faz, por que a estratificação funciona, como evitar as armadilhas comuns e como usar o gerador para passar de um elemento em branco para o CSS de produção em alguns minutos.
tl;dr: UM CSS
box-shadowleva um deslocamento X, um deslocamento Y, um raio de desfoque, um raio de propagação e uma cor, com um opcionalinsetpalavra-chave. Borrão suaviza a borda; propagação cresce ou encolhe a sombra antes de desfocar Elevação real vem de empilhar várias sombras separadas por vírgula, não de ligar uma sombra & #39; s opacidade. Use preto de baixa opacidade, um pequeno deslocamento Y, desfoque generoso e um spread ligeiramente negativo - em seguida, copie o CSS direto do gerador.
O que a propriedade box-shadow realmente faz?
box-shadow pinta uma ou mais sombras em torno de um elemento' s caixa de borda, ea propriedade é especificada em Antecedentes e Fronteiras do CSS Nível 3. A sintaxe de uma única sombra é assim:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Os deslocamentos são necessários; borrão, propagação e cor são opcionais, mas você quase sempre os definirá. Aqui está o que cada um controla, da mesma forma que penso neles ao sintonizar:
Compensação X move a sombra horizontalmente Valores positivos empurram para a direita, para a esquerda negativa Para a maioria das sombras de interface você quer isso em ou perto de zero, porque a luz no mundo real geralmente vem de cima, lançando sombras diretamente para baixo, em vez de para o lado.
Compensação Y move a sombra verticalmente Os valores positivos empurram - a para baixo, que é o que deseja para um elemento que pareça estar acima da página Este é o valor único que mais controla a forma como o & quot; high" o elemento sente.
Raio de desfoque suaviza a borda shadow' s. Um valor de zero dá uma sombra de ponta dura como uma forma sólida; valores maiores espalham a suavidade Isso não pode ser negativo Quase toda sombra de aparência natural usa um desfoque várias vezes maior que seu deslocamento Y.
Raio de propagação muda o tamanho da sombra antes que o desfoque seja aplicado A propagação positiva torna a sombra maior em todas as direções; a propagação negativa a encolhe A propagação negativa é a arma secreta para sombras de cartas apertadas e críveis, porque puxa a sombra para dentro para que não sangre além do elemento.
Cor é qualquer cor CSS válida As melhores sombras de interface usam preto ou quase preto em baixa opacidade - algo como rgba(0, 0, 0, 0.1) - em vez de um cinza totalmente opaco, porque um preto translúcido tinge tudo o que está por trás dele da mesma forma que uma sombra real.
Por que boas sombras usam mais de uma camada?
Esta é a ideia que mudou minhas sombras completamente, então ela obtém sua própria seção Uma única sombra é uma bolha única e uniformeSombras reais não são uniformes Perto do objeto a sombra é mais escura e nítida; mais longe é mais clara e mais difusa Você aproxima essa queda empilhando sombras.
Uma receita clássica são duas camadas: uma sombra apertada, ligeiramente mais escura, que fica perto do elemento e lhe dá uma base nítida, além de uma sombra mais suave, mais larga e mais clara abaixo dele que fornece a difusão do ambiente Algo como
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
O navegador pinta sombras separadas por vírgulas em ordem, com a primeira no topo Cada camada é barata, e duas ou três juntas são lidas como profundidade genuína de uma maneira que nenhuma sombra pode, não importa como você a sintonize É exatamente por isso que o gerador é construído em torno de camadas, em vez de um único conjunto de controles deslizantes - o Gerador de sombras da caixa CSS é fornecido com predefinições como Card, Elevated e Floating, todas multicamadas, para que você comece a partir de uma base realista em vez de uma bolha solitária.
O modelo mental que EU uso: pense em níveis de elevação Uma carta de descanso fica baixa com uma sombra pequena e apertada Um dropdown ou popover fica mais alto com um maior e mais suave Um modal fica mais alto de todos Aumentar a elevação significa aumentar o deslocamento Y e desfocar em todas as camadas juntas, não apenas escurecer uma sombra.
Como faço para criar uma sombra interior?
o inset palavra-chave lança uma sombra dentro do elemento' s caixa de preenchimento em vez de lançá-lo para fora Adicionar inset à frente de uma declaração de sombra e pinta dentro do elemento:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
As sombras internas são como você faz um controle parecer pressionado, recuado ou esculpido. Uma entrada de texto geralmente lê melhor com uma sombra de inserção sutil que sugere um poço onde o texto fica dentro Um estado de botão pressionado pode trocar sua sombra externa por uma interna para se sentir fisicamente deprimida E toda a tendência de neumorfismo é construída sobre o emparelhamento de uma inserção de luz de uma direção com uma inserção escura da outra No gerador, a inserção é uma única alternância por camada, para que você possa misturar sombras inseridas e iniciais no mesmo elemento - que é exatamente o que as superfícies neumórficas precisam.
Como uso o Gerador de Sombra de Caixa?
O fluxo foi projetado para corresponder à forma como EU realmente trabalho Abra o Gerador de sombras da caixa CSS e você pousa em um elemento de visualização com uma predefinição de cartão realista já aplicada, para nunca olhar para uma tela em branco.
Escolha uma predefinição para chegar perto do que você deseja - Sutil, Cartão, Elevado, Flutuante, Interno, Brilho, Neumórfico ou Afiado Cada um carrega sua pilha de camada completa Em seguida, selecione uma camada e sintonize-a com os controles deslizantes: offset X, offset Y, desfoque e espalhe cada um tem seu próprio controle, além de um seletor de cores, um controle deslizante de opacidade e o alternador de inserção As atualizações de visualização ao vivo enquanto você arrasta, então você está moldando a sombra diretamente em vez de editar números e imaginar o resultado.
Se precisar de mais profundidade, adicione uma camada Se uma camada não estiver fazendo nada útil, remova-a Há uma alternância de fundo que alterna a visualização entre claro e escuro, o que importa porque uma sombra que parece perfeita em um cartão claro pode desaparecer ou se transformar em um anel cinza feio em um escuro Verificando ambos antes de enviar salva uma viagem de ida e volta.
Quando estiver feliz, copie o CSS Você pode pegar a planície box-shadow declaração, ou um bloco que também inclui o -webkit-box-shadow prefixo se você tiver que suportar compilações WebKit muito antigas Cole-o em sua folha de estilo, seu componente estilizado ou seu valor arbitrário Tailwind e você está pronto.
Como toda ferramenta no site, ela é executada inteiramente no seu navegador Nada é carregado e ele continua funcionando offline uma vez carregado, que é a mesma abordagem do lado do cliente que descrevo no Guia de privacidade de dados.
Casos de uso do mundo real
Construindo uma escala de elevação para um sistema de projeto
Quando configuro um novo projecto, defino um conjunto fixo de níveis de elevação em vez de deixar que cada componente invente a sua própria sombra Normalmente isso fica a quatro ou cinco passos do & quot; descansar card" até ao & quot; modal." Eu construo cada um no gerador, copio o CSS e largo-os nos meus tokens de design como valores nomeados Cada cartão, menu e diálogo, em seguida, faz referência a um nível, de modo que todo o produto compartilha um modelo de iluminação consistente Fazer isso à mão em um editor de texto é miserável; fazê-lo com uma visualização ao vivo leva alguns minutos.
Fazendo uma carta realmente flutuar
O instinto padrão é uma única sombra escura, que parece colada A correção é a receita de duas camadas: uma camada apertada com um pequeno deslocamento em Y e spread negativo para ancorar o cartão, e uma camada mais larga e macia abaixo para a luz ambiente Comece a partir do Cartão ou da predefinição Elevada, empurre os valores a gosto e você receberá um cartão que é lido como levantado em vez de delineado.
Projetando estados pressionados e focados
Feedback interativo muitas vezes vive na sombra Um botão pode perder a maior parte de sua sombra exterior e ganhar uma pequena inserção na imprensa para se sentir fisicamente empurrado Uma entrada pode transportar uma inserção sutil permanente para se parecer com um poço Estes são rápidos para protótipo alternando inserção e assistindo a visualização, e eles adicionam um monte de polonês percebido para muito pouco código.
Superfícies neumórficas
Se você está indo para o visual de interface do usuário suave, você precisa de duas sombras no mesmo elemento apontando direções opostas - uma escura para baixo-direita e uma clara para cima-esquerda - então a superfície parece extrudada do fundo A predefinição Neumórfica configura isso, e você ajusta a cor, opacidade e desfoque para combinar com seu fundo específico Ele só funciona em fundos que não são nem branco puro nem preto puro, que o alternância de fundo escuro ajuda você a verificar.
caixa-sombra versus filtro: drop-shadow
Uma pergunta que recebo com frequência: quando devo usar filter: drop-shadow() em vez de box-shadow? parecem semelhantes mas comportam-se de forma diferente, e escolher errado causa bugs reais.
| característica | caixa-sombra | filtro: drop-shadow() |
|---|---|---|
| Segue | A caixa de borda retangular | Os pixels reais visíveis (não transparentes) |
| melhor para | Cartões, botões, painéis, entradas | Logotipos, ícones, PNGs com transparência, formas irregulares |
| Suporta inserção | sim | não |
| Suporta propagação | sim | não |
| Múltiplas sombras | Sim, separado por vírgulas | Sim, encadeando filtros |
| Afeta o layout | não | não |
A versão curta: para um elemento retangular normal, use box-shadow - é mais capaz, suporta spread e inset, e é para isso que este gerador produz. Alcance drop-shadow() somente quando você precisar que a sombra trace uma forma transparente ou irregular, como um logotipo ou um ícone recortado, onde uma sombra retangular pareceria errada.
Dicas e armadilhas avançadas
Algumas coisas pelas quais fui queimado Primeiro, as sombras são cortadas overflow: hidden em um ancestral Se sua bela sombra é misteriosamente cortada, um ancestral está cortando-a - ou dê espaço à sombra ou mova-a overflow governar em outro lugar. Porque box-shadow nunca afeta o layout, não empurra elementos vizinhos, o que é uma característica, mas também significa que uma sombra pode se estender silenciosamente sob um irmão.
Em segundo lugar, grandes borrões em muitos elementos podem custar desempenho de pintura, especialmente quando animado. Se você animar uma sombra em rolagem ou passar o mouse em uma lista longa, observe sua taxa de quadros; às vezes é mais barato animar a opacidade em um pseudoelemento que contém uma sombra estática. Uma vez finalizado o seu CSS, executando-o Minificador de CSS raspa os bytes extras que sombras prolixas de várias camadas adicionam.
Terceiro, não se esqueça que a cor da sombra pode ser mais do que preto Uma sombra muito sutilmente tingida - uma versão escura da sua superfície' s matiz em vez de preto puro - muitas vezes parece mais rico do que cinza neutro, porque sombras reais pegar a cor ambiente É um pequeno movimento com uma recompensa desproporcional.
Se você estiver montando um kit de ferramentas CSS mais amplo, o Guia do kit de ferramentas para desenvolvedores web abrange onde o trabalho de sombra se encaixa entre os outros utilitários baseados em navegador, e uma vez que suas sombras são feitas, o gerador de gradiente e seletor de cores complete o estilo da superfície Se a acessibilidade estiver em sua mente, combine isso com o Verificador de contraste de cores portanto, o conteúdo dos seus cartões sombreados permanece legível.
FAQ
Qual é a propriedade CSS Box-Shadow?
box-shadow adiciona uma ou mais sombras em torno de um quadro element' s. Cada sombra leva um deslocamento horizontal, um deslocamento vertical, um raio de desfoque opcional, um raio de propagação opcional e uma cor, com uma palavra-chave de inserção opcional para desenhar a sombra dentro da caixa Várias sombras são separadas por vírgulas e pintadas com a primeira no topo.
Qual é a diferença entre desfoque e spread?
O raio de desfoque suaviza a borda da sombra, de modo que um valor maior a torna mais difusa O raio de espalhamento altera o tamanho da sombra & #39; s antes de desfocar: um spread positivo a aumenta em todas as direções, enquanto um spread negativo a encolhe, que é como você mantém uma sombra bem enfiada sob um cartão em vez de sangrar além de suas bordas.
Como faço para criar uma sombra interna em CSS?
Adicione a palavra-chave de inserção à sombra. a inserção desenha a sombra dentro da caixa de preenchimento element' s em vez de fora, o que é útil para botões pressionados, poços de entrada e superfícies neumórficas Alternar o interruptor de inserção no gerador adiciona-o à camada selecionada automaticamente.
Posso usar várias sombras em um elemento?
Sim. Você pode listar várias sombras em uma única declaração de caixa-sombra separada por vírgulas, e o navegador as pinta em ordem com a primeira no topo Colocar uma sombra suave e larga sob uma menor e mais escura é a maneira padrão de fazer a elevação parecer realista em vez de colada.
Por que minha sombra de caixa é cortada?
Uma sombra é cortada quando um ancestral tem transbordamento: oculto ou quando o elemento fica na borda de um recipiente de recorte Dê espaço à sombra, ou mova a regra de transbordamento: oculto para um elemento diferente Como a sombra da caixa não afeta o layout, ela nunca empurra elementos vizinhos, portanto também pode se estender silenciosamente sob um irmão.
Qual é a diferença entre o box-shadow e o filtro: drop-shadow?
box-shadow segue o elemento' s caixa de borda retangular, por isso ignora áreas transparentes dentro de um PNG ou uma forma irregular Filtro: drop-shadow () traça os pixels visíveis reais, que se adequa a logotipos e ícones com transparência Para cartões e botões retangulares padrão, box-shadow é a escolha certa e suporta spread e inset que drop-shadow não.
Ainda preciso do prefixo -webkit- para box-shadow?
Para navegadores modernos, não. box-shadow não tem prefixo e é amplamente suportado há muitos anos. O bloco prefixado que o gerador pode produzir só é útil se você precisar suportar compilações WebKit muito antigas e, para a maioria dos projetos, apenas a propriedade box-shadow padrão é suficiente.
Este gerador de sombra de caixa envia meus dados para qualquer lugar?
não . A saída de visualização e CSS são geradas inteiramente em seu navegador com JavaScript. Nenhum valor é carregado ou armazenado e a ferramenta continua a funcionar sem conexão de rede depois que a página foi carregada.
