Per anni le mie ombre sembravano finte e non riuscivo a capire il perché. Scriverei box-shadow: 0 5px 10px blackprendi un alone grigio fangoso, abbassa i toni e continua a sentirti vagamente insoddisfatto. La carta sembrava avere un livido, non un'ombra. È stato solo quando ho iniziato a smontare i sistemi di progettazione che ammiravo - quelli in cui le carte sembrano fluttuare sinceramente - che ho capito il trucco. Non usano mai un'ombra. Ne impilano due o tre, ciascuno facendo un lavoro diverso, e il risultato si legge come una luce che si comporta nel modo in cui la luce si comporta effettivamente.
Costruisco interfacce in React e Tailwind per vivere, mantengo un tema di amministrazione di WordPress in WP Adminify in cui le ombre portano gran parte della gerarchia visiva e ho creato il Generatore di ombre della scatola CSS su Toolz.dev perché mi sono stancato di mettere a punto a mano le ombre multistrato in un editor di testo e di ricaricare per vedere il risultato Questa guida è tutto ciò che ho imparato sul box-shadow proprietà: cosa fa ogni valore, perché la stratificazione funziona, come evitare le trappole comuni e come utilizzare il generatore per passare da un elemento vuoto al CSS di produzione in un paio di minuti.
tl; dr: UN CSS
box-shadowprende un offset X, un offset Y, un raggio di sfocatura, un raggio di diffusione e un colore, con un optionalinsetparola chiave Sfocatura ammorbidisce il bordo; la diffusione cresce o riduce l'ombra prima di sfocare La vera elevazione deriva dall'impilamento di più ombre separate da virgole, non dall'attivazione di un'ombreggiatura & #39; opacità S. Usa nero a bassa opacità, un piccolo offset Y, una generosa sfocatura e una diffusione leggermente negativa, quindi copia il CSS direttamente dal generatore.
Cosa fa effettivamente la proprietà box-shadow?
box-shadow dipinge una o più ombre attorno a un elemento's border box e la proprietà è specificata in sfondi e confini CSS Livello 3. La sintassi per una singola ombra è simile a questa:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Gli offset sono richiesti; sfocatura, diffusione e colore sono opzionali ma quasi sempre li imposterai Ecco cosa ognuno controlla, nel modo in cui penso a loro durante l'accordatura:
Offset X sposta l'ombra orizzontalmente I valori positivi la spingono a destra, la sinistra negativa Per la maggior parte delle ombre dell'interfaccia lo si desidera pari o vicino allo zero, perché la luce nel mondo reale di solito proviene dall'alto, proiettando le ombre verso il basso anziché di lato.
Offset Y sposta l'ombra verticalmente I valori positivi la spingono verso il basso, che è ciò che si desidera per un elemento che sembra trovarsi sopra la pagina Questo è il singolo valore che controlla maggiormente come & quot; high" l'elemento si sente.
Raggio sfocatura ammorbidisce il bordo shadow' s. Un valore pari a zero dà un'ombra dai bordi duri come una forma solida; valori più grandi diffondono la morbidezza. Questo non può essere negativo Quasi ogni ombra dall'aspetto naturale utilizza una sfocatura molte volte più grande del suo offset Y.
Raggio di diffusione cambia la dimensione dell'ombra prima che venga applicata la sfocatura La diffusione positiva rende l'ombra più grande in ogni direzione; la diffusione negativa la restringe La diffusione negativa è l'arma segreta per ombre di carte strette e credibili, perché tira dentro l'ombra in modo che non si dissangua oltre l'elemento.
Colore è qualsiasi colore CSS valido Le migliori ombre dell'interfaccia utilizzano il nero o quasi nero a bassa opacità - qualcosa come rgba(0, 0, 0, 0.1) - piuttosto che un grigio completamente opaco, perché un nero traslucido tinge tutto ciò che c'è dietro come fa una vera ombra.
Perché le ombre buone usano più di uno strato?
Questa è l'idea che ha cambiato completamente le mie ombre, quindi ottiene una sua sezione Una singola ombra è un singolo blob uniforme Le ombre reali non sono uniformi Vicino all'oggetto l'ombra è più scura e nitida; più lontano è più chiara e diffusa Si approssima quel falloff impilando le ombre.
Una ricetta classica è composta da due strati: un'ombra stretta e leggermente più scura che si trova vicino all'elemento e gli conferisce una base nitida, più un'ombra più morbida, più larga e più chiara sotto di esso che fornisce la diffusione ambientale Qualcosa del tipo:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
Il browser dipinge ombre separate da virgole in ordine, con la prima in alto Ogni livello è economico e due o tre insieme leggono come profondità autentica in un modo che nessuna singola ombra può, non importa come la si sintonizza Questo è esattamente il motivo per cui il generatore è costruito attorno a livelli piuttosto che un singolo set di cursori - il Generatore di ombre della scatola CSS navi con preset come Card, Elevated e Floating che sono tutte multi-strato, quindi si parte da una base realistica invece che da un blob solitario.
Il modello mentale che uso: pensa nei livelli di elevazione Una carta a riposo si trova bassa con un'ombra piccola e stretta Un dropdown o un popover si trova più in alto con uno più grande e morbido Un modale si trova più in alto di tutti Aumentare l'elevazione significa aumentare l'offset Y e sfocare tutti i livelli insieme, non solo oscurare un'ombra.
Come faccio a creare un'ombra interiore?
la inset parola chiave capovolge un'ombra all'interno dell'elemento's scatola di imbottitura invece di lanciarlo verso l'esterno Aggiungere inset nella parte anteriore di una dichiarazione ombra e dipinge all'interno dell'elemento:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Le ombre interne sono il modo in cui fai sembrare un controllo premuto, incassato o scolpito. Un input di testo spesso si legge meglio con una sottile ombra inserita che suggerisce un pozzetto in cui si trova il testo all'interno. Uno stato del pulsante premuto può scambiare la sua ombra esterna con una interna per sentirsi fisicamente depresso. E l'intera tendenza al neumorfismo si basa sull'abbinamento di un inserto luminoso da una direzione con un inserto scuro dall'altra. Nel generatore, l'inserto è un singolo interruttore per strato, quindi puoi mescolare le ombre inserite e iniziali nello stesso elemento, che è esattamente ciò di cui hanno bisogno le superfici neumorfiche.
Come faccio a utilizzare il generatore di ombre Box Shadow?
Il flusso è progettato per corrispondere a come lavoro effettivamente Aprire il Generatore di ombre della scatola CSS e si atterra su un elemento di anteprima con un realistico preset Card già applicato, in modo da non fissare mai una tela bianca.
Scegli un preset per avvicinarti a ciò che desideri: sottile, carta, elevato, fluttuante, interno, luminoso, neumorfico o nitido. Ognuno carica il suo stack di livelli completo. Quindi seleziona un livello e sintonizzalo con i cursori: offset X, offset Y, sfocatura e diffusione hanno ciascuno il proprio controllo, oltre a un selettore di colori, un cursore di opacità e l'interruttore di inserimento. L'anteprima si aggiorna in diretta mentre trascini, quindi stai modellando l'ombra direttamente anziché modificare i numeri e immaginare il risultato.
Se hai bisogno di più profondità, aggiungi un livello Se un livello non fa nulla di utile, rimuovilo C'è un interruttore di sfondo che commuta l'anteprima tra chiaro e scuro, il che conta perché un'ombra che sembra perfetta su una carta chiara può svanire o trasformarsi in un brutto anello grigio su uno scuro Controllando entrambi prima della spedizione si salva un viaggio di andata e ritorno.
Quando sei felice, copia il CSS. Puoi afferrare la pianura box-shadow dichiarazione, o un blocco che includa anche il -webkit-box-shadow prefisso se devi supportare build WebKit molto vecchie Incollalo nel tuo foglio di stile, nel tuo componente in stile o nel tuo valore arbitrario Tailwind e il gioco è fatto.
Come ogni strumento sul sito, funziona interamente nel tuo browser Nulla viene caricato e continua a funzionare offline una volta caricato, che è lo stesso approccio lato client che descrivo nel Guida alla privacy dei dati.
Casi d'uso nel mondo reale
Costruire una scala di elevazione per un sistema di progettazione
Quando configuro un nuovo progetto, definisco un insieme fisso di livelli di elevazione piuttosto che lasciare che ogni componente inventi la propria ombra Di solito è a quattro o cinque passi da & quot; carte e quot a riposo; fino a & quot; modal.& quot; li costruisco ciascuno nel generatore, copio i CSS e li inserisco nei miei token di progettazione come valori con nome Ogni scheda, menu e finestra di dialogo fa quindi riferimento a un livello, quindi l'intero prodotto condivide un modello di illuminazione coerente Fare questo a mano in un editor di testo è infelice; farlo con un'anteprima dal vivo richiede alcuni minuti.
Far fluttuare davvero una carta
L'istinto predefinito è una singola ombra scura, che sembra incollata La correzione è la ricetta a due strati: uno strato stretto con un piccolo offset Y e una diffusione negativa per ancorare la carta, e uno strato più ampio e morbido sotto per la luce ambientale Inizia dal preset Card o Elevated, spingi i valori a piacere e ottieni una carta che si legge come sollevata anziché delineata.
Progettare stati pressati e focalizzati
Il feedback interattivo spesso vive nell'ombra Un pulsante può perdere la maggior parte della sua ombra esterna e ottenere un piccolo riquadro sulla pressione per sentirsi spinto fisicamente Un input può trasportare un riquadro sottile permanente per assomigliare a un pozzo Questi sono veloci da prototipare attivando l'inserto e guardando l'anteprima, e aggiungono molto smalto percepito per pochissimo codice.
Superfici neumorfiche
Se stai cercando il look soft-UI, hai bisogno di due ombre sullo stesso elemento che puntano in direzioni opposte - una scura in basso a destra e una chiara in alto a sinistra - in modo che la superficie appaia estrusa dallo sfondo Il preset Neumorfico imposta questo su, e si sintonizza il colore, l'opacità e la sfocatura per abbinarsi al tuo sfondo specifico Funziona solo su sfondi che non sono né bianco puro né nero puro, che l'interruttore dello sfondo scuro ti aiuta a controllare.
box-shadow versus filter: drop-shadow
Una domanda che ricevo spesso: quando dovrei usare filter: drop-shadow() invece di box-shadow? sembrano simili ma si comportano in modo diverso e scegliere sbagliato provoca veri bug.
| caratteristica | scatola-ombra | filtro: goccia-ombra() |
|---|---|---|
| Segue | La scatola di bordo rettangolare | I pixel visibili effettivi (non trasparenti) |
| Meglio per | Carte, pulsanti, pannelli, ingressi | Loghi, icone, PNG con trasparenza, forme irregolari |
| Supporta inserto | certo | no |
| Supporta spread | certo | no |
| Ombre multiple | Sì, separati da virgole | Sì, incatenando i filtri |
| Influisce sul layout | no | no |
La versione corta: per un normale elemento rettangolare, utilizzare box-shadow - è più capace, supporta spread e inset, ed è ciò che questo generatore produce Raggiungi per drop-shadow() solo quando hai bisogno dell'ombra per tracciare una forma trasparente o irregolare, come un logo o un'icona ritagliata, dove un'ombra rettangolare sembrerebbe sbagliata.
Suggerimenti e trappole avanzati
Alcune cose da cui sono stato bruciato Per prima cosa, le ombre vengono tagliate overflow: hidden su un antenato Se la tua bella ombra è misteriosamente tagliata, un antenato la sta ritagliando - o dare la stanza delle ombre o spostare il overflow governa altrove. Perché box-shadow non influisce mai sul layout, non spinge gli elementi vicini, il che è una caratteristica, ma significa anche che un'ombra può estendersi silenziosamente sotto un fratello.
In secondo luogo, enormi sfocature su molti elementi possono costare prestazioni di vernice, soprattutto se animati Se si anima un'ombra su scorrimento o si passa il mouse su un lungo elenco, guardare il frame rate; a volte è più economico animare l'opacità su uno pseudo-elemento che contiene un'ombra statica Una volta che il tuo CSS è finalizzato, eseguendolo attraverso il Minifier CSS rade i byte extra aggiunti dalle ombre multistrato prolisse.
Terzo, non dimenticare che il colore dell'ombra può essere più del nero Un'ombra molto sottilmente colorata - una versione scura della tua superficie's tonalità piuttosto che nero puro - spesso sembra più ricca del grigio neutro, perché le ombre reali raccolgono il colore ambientale È una piccola mossa con un payoff sproporzionato.
Se stai assemblando un toolkit CSS più ampio, il Guida al kit per gli sviluppatori web copertine in cui il lavoro shadow si inserisce tra le altre utilità basate su browser e, una volta completate le ombre, il Generatore di sfuma e selettore completa lo stile della superficie Se l'accessibilità è nella tua mente, abbinalo al Controllore del contrasto del colore quindi il contenuto seduto sulle tue carte in ombra rimane leggibile.
FAQ
Qual è la proprietà della scatola-ombreggiatura CSS?
box-shadow aggiunge una o più ombre attorno a un elemento & #39;s frame Ogni ombra prende un offset orizzontale, un offset verticale, un raggio di sfocatura opzionale, un raggio di diffusione opzionale e un colore, con una parola chiave inserita opzionale per disegnare l'ombra all'interno della scatola Più ombre sono separate da virgole e dipinte con la prima in alto.
Qual è la differenza tra sfocatura e diffusione?
Il raggio di sfocatura ammorbidisce il bordo dell'ombra, quindi un valore maggiore lo rende più diffuso Il raggio di diffusione cambia la dimensione dell'ombra's prima di sfocarsi: uno spread positivo lo fa crescere in ogni direzione, mentre uno spread negativo lo restringe, ed è così che si mantiene un'ombra nascosta strettamente sotto una carta invece di sanguinare oltre i suoi bordi.
Come faccio a creare un'ombra interna in CSS?
Aggiungi la parola chiave inserita all'ombra L'inserto disegna l'ombra all'interno della casella di riempimento element' s invece che all'esterno, utile per pulsanti premuti, pozzetti di input e superfici neumorfiche La commutazione dell'interruttore inserito nel generatore lo aggiunge automaticamente al livello selezionato.
Posso usare più box-shadow su un elemento?
Sì. È possibile elencare diverse ombre in una singola dichiarazione box-shadow separate da virgole e il browser le dipinge in ordine con la prima in alto Stratificare un'ombra morbida e larga sotto una più piccola e scura è il modo standard per rendere l'elevazione realistica anziché incollata.
Perché la mia ombra-box viene ritagliata?
Un'ombra viene tagliata quando un antenato ha un overflow: nascosta o quando l'elemento si trova sul bordo di un contenitore di ritaglio Dare la stanza delle ombre, o spostare il overflow: regola nascosta a un elemento diverso Poiché box-shadow non influisce sul layout, non spinge mai gli elementi vicini, quindi può anche estendersi silenziosamente sotto un fratello.
Qual è la differenza tra box-shadow e filtro: drop-shadow?
box-shadow segue l'elemento's rettangolare scatola di bordo, quindi ignora le aree trasparenti all'interno di un PNG o una forma irregolare Filtro: drop-shadow () traccia i pixel visibili effettivi, che si adatta a loghi e icone con trasparenza Per le schede rettangolari standard e pulsanti, box-shadow è la scelta giusta e supporta spread e inset che drop-shadow non.
ho ancora bisogno del prefisso -webkit- per box-shadow?
Per i browser moderni, no. box-shadow è stato non prefissato e ampiamente supportato per molti anni Il blocco prefissato che il generatore può emettere è utile solo se devi supportare build WebKit molto vecchie, e per la maggior parte dei progetti la proprietà standard box-shadow da sola è sufficiente.
Questo generatore di ombre a scatola invia i miei dati da qualche parte?
no . L'anteprima e l'output CSS sono generati interamente nel tuo browser con JavaScript. Nessun valore viene caricato o memorizzato e lo strumento continua a funzionare senza connessione di rete una volta caricata la pagina.
