Gerador de Sombras CSS
Gere valores de Box-Shadow de forma interativa e aplique volume nos seus componentes visuais na web.
O que é a Propriedade Box-Shadow?
No CSS, o atributo "box-shadow" descreve um ou mais efeitos visuais parecidos com sombras sendo projetados sob o "quadro" ou bloco do elemento selecionado na tela. A propriedade desenha uma silhueta baseada perfeitamente na sua forma e aplica coordenadas de deslocamento sobre o eixo matemático do computador, além de esfumaçar visualmente aquelas bordas por meio de cálculos pesados de renderização.
A Importância da Iluminação na UI
Na interação humano-computador não precisamos ver tudo achatado num painel triste 2D. Ao imitar vagamente a iluminação real que encontramos através de lâmpadas projetadas nas elevações e pilhas de objetos sobre nossas escrivaninhas físicas, criarmos hierarquia. Uma janela de pop-up "sobressai" das informações escondidas devido essencialmente por desenharmos fortes desfoques subjacentes evidenciando sua primazia naquela altura.
Como Construir essa Sintaxe?
As propriedades que constroem a base deste imenso poder estético são exatidões lógicas. Lê-se por ordem usualmente: Deslocamento no Eixo X (negativos para a esquerda, positivos direita), Eixo Y (negativos acima, baixos em positivos), o limite métrico daquela degradação (o Blur/Desfoque exato) acompanhado do espalhamento brutal da grossura (Spread), além do formato final no padrão unificado da opacidade ou cor via RGBa. Modificar sem um mecanismo de ajuste rápido como o nosso é uma imensa tarefa de suposições frustrantes na codificação crua.