Una delle novità della sintassi CSS è la possibilità di aggiungere un'ombra agli oggetti per dare la sensazione di profondità. In realtà, molti browser implementavano già questa funzionalità già da tempo attravarso i prefissi CSS, ma ora questa funzionalità è disponibile su tutti i browser senza bisogno prefissi CSS.
Per aggiungere un'ombra a un oggetto dobbiamo usare la proprietà CSS box-shadow e a seconda del tipo di ombra che vogliamo creare abbiamo diversi modi di usarla. In questo primo esempio creiamo un'ombra che viene visualizzata ai lato destro e inferiore di un div.
.shadow { box-shadow: 10px 10px 5px #666; }
I primi due valori indicano per quanto si estende l'ombra dal bordo inferiore e destro dell'oggetto. I caso di valori negativi si intendono i bordi superiore e sinistro. Il terzo valore esprime il fade dell'ombra mentre l'ultimo valore indica il colore.
In questo secondo esempio invece creiamo un'ombra che viene mostrata su tutti i lati.
.shadow { box-shadow: 0px 0px 1px 2px #666; }
Come possiamo vedere i primi due valori sono azzerati e abbiamo un quarto valore che esprime quanto si allarga l'ombra da ogni lato del div.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni sui blob con Azure Storage Actions
Miglioramenti nell'accessibilità con Angular CDK
Assegnare un valore di default a un parametro di una lambda in C#
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Generare file PDF da Blazor WebAssembly con iText
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Utilizzare il trigger SQL con le Azure Function
Evitare la command injection in un workflow di GitHub
Migrare una service connection a workload identity federation in Azure DevOps
Utilizzare la session affinity con Azure Container Apps
Eseguire una query su SQL Azure tramite un workflow di GitHub
Gestire i null nelle reactive form tipizzate di Angular