3

Estou tentado fazer o box-shadow herdar a cor da sombra de forma "dinâmica", pegando a cor setada no color através do currentColor. Até ai tudo bem, só que a cor é "sólida", não estou conseguindo dar transparência nela.

Repare nesse exemplo. A primeira div é o esperado, mas a cor da sombre fica muito forte, queria dar uma atenuada nela usando opacity de alguma forma, mas mantendo a herança do currentColor. Já tentei de vária formas a ideia seria algo como

box-shadow: 0 4px 8px 0 rgba((--cor), .25); ou até box-shadow: 0 4px 8px 0 rgba(currentColor, .25);

Mas nenhuma delas funciona, não queria ter que usar um pseudo-elemento como ::after. E um detalhe, todas as cores da lib estão em hexa, então não posso muda-las para rgb():

:root {
    --cor: #ff0000;
}
div {

    width: max-content;
    height: 60px;
    margin: 20px;
    
    color: var(--cor);
    
    border: 2px solid currentColor;
    box-shadow: 0 5px 5px 0 currentColor; 
   
}

div + div {

    --cor: blue;
    /* assim tive que coloca a cor em hardcode para funcionar */
    box-shadow: 0 5px 5px 0 rgba(0,0,255,0.25); 
   
}
<div>sombra usando o currentColor</div>
<div>queria o currentColor com transparencia</div>

2 Respostas 2

2

Essa é uma resposta a pedido do usuário @CmteCardeal

Como dito no comentário, usei o quarto valor da propriedade box-shadow para dar um jeitinho... Esse valor é conhecido como spread, e ao usar um valor negativo nele a sobra fica "mais para dentro" do elemento, e para corrigir o fato da sombra ir mais para dentro eu aumentei o blur, e assim consegui atenuar bem a sambra mantendo a cor dela com o currentColor.

Para mim ficou satisfatório, e foi a forma que apliquei no final das contas... Leia o comment que deixei no código do CSS

:root {
    --cor: #ff0000;
}
div {

    width: max-content;
    height: 40px;
    margin: 20px;
    padding: 10px;
    
    color: var(--cor);
    
    border: 2px solid currentColor;
    box-shadow: 0 5px 5px 0 currentColor; 
   
}

div + div {

    /* repare nos valores que usei no box-shadow, 
       coloquei um valor de -5px no spread 
       e aumente o valor do blue em 5px */
    box-shadow: 0 5px 10px -5px currentColor; 
   
}
<div>sombra usando o <b>currentColor</b> e sem spread no box-shadow</div>
<div>sombra usando o <b>currentColor</b> e um <b>spread negativo</b> no box-shadow</div>

0

Css não é JavaScript, se você chamar a função var(--cor) será retornado, só e somente o valor da propriedade --cor. Então logicamente não ocorrerá nenhuma conversão de --cor: #FF0000 para um spread de 255, 0, 0, e o que foi armazenado em currentColor continua a ser #ff0000, diferente de javascript onde tudo é uma expressão, css é uma linguagem de marcação como HTML.
E a não ser que haja uma função pré-definida para retornar exatamente um valor puro, mais nada ocorrerá na marcação.
Mas na verdade já existe essa função pré-definida no módulo color do Sass. E também há a opção de alteração em runtime com JavaScript usando plugin do CssNext.

Por final a funcionalidade css-mod, a qual servirá para converter valores de cores, ainda está sendo escrita na W3C para uso, mas ainda não foi adotada por nenhum browser.

3
  • Valeu a resposta amigo, mas o output do SASS não é o que eu espero ele não vai resolver o problema, e implementar uma LIB com JS para resolver isso muito menos rss... Acabei resolvendo de forma satisfatória com o valor de spread-radius do box-shadow
    – hugocsl
    Commented 3/11/2020 às 17:57
  • @hugocsl sei que é atrasado, mas pode colocar uma resposta de como você fez? Sua pergunta esta como favorita porque tambem quero saber :). Commented 12/12/2020 às 18:17
  • @CmteCardeal me da uns 10 min que já posto a solução que usei, mas como disse, foi no "jeitinho brasileiro"...
    – hugocsl
    Commented 12/12/2020 às 18:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .