Categoria: Sviluppo
Generatore di box-shadow CSS multilivello
Progetta un box-shadow a più livelli da un unico set di controlli
Imposta offset, sfocatura, diffusione, colore e numero di livelli, guarda un'anteprima dal vivo e copia una dichiarazione box-shadow multilivello costruita come i designer sovrappongono le ombre per ottenere una vera profondità. Tutto viene renderizzato nel tuo browser.
box-shadow: 0px 4px 6px -1px rgba(23, 33, 28, 0.3), 0px 8px 12px -2px rgba(23, 33, 28, 0.26), 0px 12px 18px -2px rgba(23, 33, 28, 0.22), 0px 16px 24px -3px rgba(23, 33, 28, 0.18), 0px 20px 30px -4px rgba(23, 33, 28, 0.14);
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Un singolo livello di box-shadow tende a sembrare una nebbia piatta; la vera elevazione nasce dalla sovrapposizione di più livelli che si restringono e sfumano avvicinandosi all'elemento, come si attenua la luce ambientale. Questo strumento prende un unico set di controlli per offset, sfocatura, diffusione e colore, più un numero di livelli, e ne deriva automaticamente altrettanti livelli progressivamente più stretti e più opachi, così ottieni un'ombra sovrapposta convincente senza regolare ognuno a mano.
Come si usa
- Scegli quanti livelli generare.
- Imposta offset, sfocatura, diffusione, colore e opacità per il livello di base.
- Copia la dichiarazione box-shadow multilivello generata.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Viene caricato qualcosa?
- No. L'anteprima è un'ombra CSS disegnata dal tuo browser e la dichiarazione viene assemblata nella pagina.
- Come vengono derivati i singoli livelli?
- Ogni livello riduce proporzionalmente offset, sfocatura e diffusione avvicinandosi all'elemento e aumenta l'opacità man mano che si avvicina, lo stesso schema di restringimento e sfumatura usato nei sistemi di elevazione costruiti a mano.
- Perché c'è un limite al numero di livelli?
- Oltre cinque o sei livelli la differenza visiva diventa trascurabile mentre il CSS continua a crescere, quindi il controllo è limitato per mantenere l'output facile da leggere e incollare.