Nel CSS abbiamo un modo per impostare delle variabili che potranno essere riutilizzate all'interno della definizione degli stili.
:root { --main-bg-color: black; } mio-elemento { background-color: var(--main-bg-color); }
Ma non è solo questo il caso: possiamo creare variabili direttamente nell'HTML e riutilizzarle nel CSS, questo ci da uno spiraglio di customizzazione dall'esterno del file CSS.
<div class="container" style="--count: 10"> <span style="--index: 0"></span> <span style="--index: 1"></span> <span style="--index: 2"></span> <span style="--index: 3"></span> <span style="--index: 4"></span> <span style="--index: 5"></span> <span style="--index: 6"></span> <span style="--index: 7"></span> <span style="--index: 8"></span> <span style="--index: 9"></span> </div>
.container span { height: 10px; width: 30px; background: grey; display: block; opacity: calc(var(--index) / var(--count)); }
Utilizzando le due variabili count e index riusciamo ad impostare una diversa opacità dell'elemento span.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire query verso tipi non mappati in Entity Framework Core
Gestire il colore CSS con HWB
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Gestire la cancellazione di una richiesta in streaming da Blazor
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare QuickGrid di Blazor con Entity Framework
Creare una custom property in GitHub
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Generare velocemente pagine CRUD in Blazor con QuickGrid
Creare gruppi di client per Event Grid MQTT
Configurare policy CORS in Azure Container Apps
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework