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

A propriedade box-shadow-color de CSS já pode nos atender? Veja a resposta para esta pergunta regada a variáveis CSS.

Ir para o artigo

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? — 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), mas, basicamente, é preciso criar uma variável CSS para definir uma cor que poderá ser usada em qualquer número de propriedades.

Para o exemplo, fizemos um componente que ficou assim:

Cores e variáveis CSS: componente de teste.

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.

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.

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!
Cores e variáveis CSS: demonstração da simulação de box-shadow-color em hover de botões.

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:

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.