Sombras CSS

O que é

Escala de sombra (nome igual ao espaçamento/raio) pra dar profundidade, mais halo colorido (glow) na cor semântica, sombra interna, e uma galeria técnica portada do Y2 pra casos específicos.

Como funciona

var(--sw-shadow) é um alias desta escala. A escala neutra e o glow usam box-shadow comum; a interna usa inset.

Exemplos

<div class="bg-sur r-m sha-0">nenhuma</div>
<div class="bg-sur r-m sha-p">pequena</div>
<div class="bg-sur r-m sha">média (padrão)</div>
<div class="bg-sur r-m sha-g">grande</div>
<div class="bg-sur r-m sha-gg">bem grande</div>

<div class="bg-sur r-m sha-pri">halo primária</div>
<div class="bg-sur r-m sha-suc">halo sucesso</div>
<div class="bg-sur r-m sha-err">halo erro</div>

<div class="bg-sur r-m sha-in">interna padrão</div>
<div class="bg-sur r-m shad-in-1">interna, nível 1 (sutil)</div>
<div class="bg-sur r-m shad-in-2">interna, nível 2</div>
<div class="bg-sur r-m shad-in-3">interna, nível 3 (funda)</div>

<!-- 46 sombras específicas, portadas do framework Y2 (uteis_shadows.html) —
     pra quando a escala neutra (sha-0…gg) não cobre o efeito que você precisa -->
<div class="bg-sur r-m shad1">.shad1</div>
<div class="bg-sur r-m shad23">.shad23</div>
<div class="bg-sur r-m shad46">.shad46</div>

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.