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
Usare lo spread operator con i collection initializer in C#
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Creare gruppi di client per Event Grid MQTT
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Utilizzare un service principal per accedere a Azure Container Registry
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Gestire la cancellazione di una richiesta in streaming da Blazor
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Utilizzare QuickGrid di Blazor con Entity Framework
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
I più letti di oggi
- Tutorial Windows Communication Foundation
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestire la cancellazione di una richiesta in streaming da Blazor
- Repository con code-first di Entity Framework
- Blazor: Security
- Utilizzare WebAssembly con .NET, ovunque
- Protobuf: un serializzatore alternativo per WCF