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.
|
1 2 3 |
.c-component { --component-color: green; } |
Para o exemplo, fizemos um componente que ficou assim:
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.
|
1 2 3 |
.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.
|
1 2 3 4 5 |
<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!
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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.