box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;Il generatore di ombreggiatura CSS Box è un editor visivo per la proprietà CSS Box-Shadow. Puoi regolare l'offset, il raggio di sfocatura, la diffusione del raggio, il colore e l'opacità con i cursori e vedere il risultato in diretta sul rendering su un elemento di anteprima, quindi copiare il CSS esatto. Invece di indovinare i valori dei pixel e ricaricare la pagina, dai forma direttamente l'ombra e leggi il codice che produce.
La proprietà della scatola-ombra è ingannevolmente profonda. Una singola dichiarazione può impilare diverse ombre, ciascuna con i propri offset, sfocatura, diffusione, colore e una parola chiave riquadro opzionale che dipinge l'ombra all'interno dell'elemento anziché all'esterno. Le ombre di interfaccia reali utilizzano quasi sempre due o più livelli per sembrare naturali, il che è noioso per scrivere a mano. Questo strumento gestisce i livelli per te e genera una dichiarazione valida per le specifiche nell'ordine corretto separato da virgole.
Tutto accade nel tuo browser. Scegli un preset, sintonizza i livelli, cambia l'anteprima tra sfondi chiari e scuri e copia la proprietà standard o un blocco che includa anche il prefisso -webkit. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.
Scegli un preset come carta, elevato o neumorfico per ottenere un punto di partenza realistico, oppure inizia con un singolo livello di ombra predefinito e da lì si accumula.
Trascina l'offset orizzontale e verticale, il raggio di sfocatura e diffondi i cursori del raggio, imposta il colore dell'ombra e l'opacità e attiva l'inserto per spostare l'ombra all'interno della casella.
Aggiungi strati di ombra extra per la profondità: un'ombra ampia e morbida sotto una più tesa più scura si legge come un'elevazione naturale. Riordina o rimuovi i livelli mentre perfezioni l'aspetto.
Copia la dichiarazione di box-shadow o il blocco prefisso per i browser più vecchi e incollalo direttamente nel foglio di stile o negli stili dei componenti.
Impila un numero qualsiasi di livelli di ombra in una dichiarazione, nell'ordine di verniciatura dall'alto in basso corretto, che è il modo in cui si costruisce la carta reale e l'elevazione modale
Slider per offset orizzontale e verticale, raggio di sfocatura e raggio di diffusione, oltre a un selettore di colori, un controllo di opacità e un'interruttore a inserto che copre ogni parte della grammatica
Un elemento di anteprima si aggiorna istantaneamente durante la modifica e puoi cambiare lo sfondo tra chiaro e scuro per verificare come l'ombra legge in entrambi i temi
Le ricette curate per le ombre sottili, card, elevate, mobili, interne, bagliore, neumorfiche e taglienti ti danno un punto di partenza collaudato invece di una tela bianca
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
0 comments
No comments yet. Be the first to share your thoughts!