# Cores e variáveis CSS: box-shadow-color?!

> Cores e variáveis CSS: box-shadow-color existe de verdade?! Técnicas avançadas para sombras e cores dinâmicas com custom properties CSS. Truque incrível!

URL: https://dpw.dev/css/variaveis-css-box-shadow-color/  
Publicado em: 2020-01-30  
Categoria: css  
Tags: interface, web-design  
Autor: Tárcio Zemel

[Vídeo no YouTube](https://www.youtube.com/watch?v=Qro7SXa4Bok)

Para quem começou a desenvolver web designs/UIs para a Web quando conseguir colocar bordas arredondadas a um elemento era considerado inovador e surpreendente (e beeem mais complicado de se fazer que hoje em dia), o advento de `box-shadow` em CSS é comparável a um evento cósmico.

Ahh, se vocês, jovens dinâmicos, que pensam que piscina de bolinhas e lanchonete com cardápio _gluten free_ são direitos humanos inalienáveis, tivessem que fazer sombras em elementos há 15, 20 anos atrás...

Mas, mesmo com toda as facilidades e possibilidades que as novas tecnologias Web trouxeram e continuarão trazendo, algo ainda sombreia os entusiastas de CSS: a falta da propriedade `box-shadow-color`.

## Afinal, `box-shadow-color` existe ou não existe?

Burburinhos sobre a possibilidade de se usar tal propriedade CSS foram vistos em recantos escuros de chans e deep web, mas, até o momento da publicação deste artigo, nada foi provado.

Contudo, mesmo sem a confirmação de tais rumores, os clientes continuam ávidos por sombras, das mais modestas às rebuscadas e moderninhas -- conhece a [Iniciativa Neumorfismo](/design/neumorfismo-neumorphism-ui/)? -- e, de alguma forma, é preciso prover tal recurso visual para aplacar suas iras e fazer de seus bolsos mais leves.

Ante o atual cenário csszístico, só nos resta usar a venerável técnica anciã da _gambeta_.

### Variáveis CSS para simular `box-shadow-color`

Sim, vamos aliar uma tecnologia (relativamente) recente, **variáveis CSS**, para simular o resultado de uma tecnologia inexistente (mas possivelmente futura), `box-shadow-color`.

Assista ao vídeo no início do artigo para conhecer melhor os detalhes da implementação (e/ou [acesse o repositório com o código completo](https://github.com/desenvolvweb/box-shadow-color-css-variables)), mas, basicamente, é preciso criar uma variável CSS para definir uma cor que poderá ser usada em qualquer número de propriedades.

```scss
.c-component {
  --component-color: green;
}
```

Para o exemplo, fizemos um componente que ficou assim:

![Cores e variáveis CSS: componente de teste.](/images/blog/variaveis-css-box-shadow-color/variaveis-css-box-shadow-color.webp)

Em seguida, fazer valer o uso que se espera de uma variável CSS, atribuindo-a ao valor da(s) propriedade(s) necessária(s).

No caso, a intenção é manipular `box-shadow`/`drop-shadow`.

```javascript
.c-component__cta:hover {
  filter: drop-shadow(0 0 6px var(--component-color));
}
```

Então, no `:hover` do CTA, ele receberá um glow da mesma cor que seu background. Até aí tudo bem, mas você deve ter notado que isso não resolve a questão principal; toda "instância" do componente vai continuar tendo a cor de fundo e o brilho verde.

E é aí que entra a cabriola felina: **estilos inline**.

Através da declaração de CSS inline no HTML, é possível atribuir um novo valor à variável CSS.

```html
<div class="c-component"> style="--component-color:red">
    <h1 class="c-component__title">Lorem ipsum</h1>
    <p class="c-component__text">Lorem ipsum dolor sit amet consectetur...</p>
    <button class="c-component__cta">Saiba mais</button>
</div>
```

Isso significa que se torna praticável alterar a cor de `box-shadow`/`drop-shadow` _por componente_!

![Cores e variáveis CSS: simulando box-shadow-color com variáveis CSS. É possível alterar a variável por componente a partir de estilos inline!](/images/blog/variaveis-css-box-shadow-color/variaveis-css-box-shadow-color-2-components.webp)

![Cores e variáveis CSS: demonstração da simulação de box-shadow-color em hover de botões.](/images/blog/variaveis-css-box-shadow-color/variaveis-css-box-shadow-color-2-components-hover.webp)

Perceba que, pelo fato de (ainda) não existir uma propriedade CSS `box-shadow-color`, esta é a maneira disponível no momento para se conseguir este tipo de modificador.

Veja estas regras:

```scss
.c-component {
  border: 1px solid gray;
  box-shadow: 1px 1px gray;
}

.c-component--featured {
  border-width: 2px;
  box-shadow: 2px 2px gray;
}

.c-component--error {
  border-color: red;
  box-shadow: 1px 1px red;
}
```

Perceba que é possível, em cada Modificador, sobrescrever somente "parte" da propriedade, o que é altamente recomendado por permitir que não haja repetições de código. Menos para `box-shadow`/`drop-shadow()`...

E, para atingir algo assim (ou o mais próximo possível disso), conseguindo benefícios similares, é que esta técnica de trabalhar com **variáveis CSS modificadas com estilo inline** mostra para o que veio.

## Conclusão

`box-shadow-color` ainda não existe. Romperemos em riso quando finalmente esta aclamada e aguardada propriedade CSS surgir. Mas este dia não é hoje.

Continuemos gambetando alterações diversas de propriedades usando variáveis CSS. `box-shadow-color` é a propriedade para sombras que merecemos, mas não a que precisamos agora.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml