Controllo completo dello stile CSS.
Ogni blocco in CardBuilder espone l'intero spettro di proprietà CSS — organizzate in 8 gruppi logici. Stilizza l'intero blocco o esplora i sotto-componenti e stilizza ogni parte in modo indipendente. Nessuna conoscenza CSS necessaria.
- 8
- Gruppi di proprietà
- 50+
- Proprietà CSS
- 6
- Unità CSS supportate
- ∞
- Target sotto-componente
| Blocco | Target di stile |
|---|---|
| Stato entità |
Blocco
Valore stato
Unità
|
| Attributo entità |
Blocco
Etichetta
Valore
|
| Icona |
Blocco
Icona
Template Pre
Template Post
|
| Slider |
Blocco
Traccia
Traccia attiva
Pollice
Valore
|
| Toggle pulsante |
Blocco
Opzione
Opzione attiva
Icona
Etichetta
|
| Menu Select |
Blocco
Container
Dropdown
Etichetta selezionata
|
Stilizza ogni parte di un blocco, in modo indipendente
I blocchi con più componenti visivi espongono target di stile separati — così puoi dare un colore diverso al valore dello stato e all'unità, o stilizzare il pulsante attivo diversamente da quelli inattivi.
Come funziona
Seleziona qualsiasi blocco, apri il pannello Stili. Se il blocco ha sotto-componenti, in cima appare un selettore target. Scegli il target — l'elemento corrispondente viene evidenziato sul canvas con un bordo tratteggiato. I tuoi stili ora si applicano solo a quella parte.
Ogni proprietà CSS, organizzata
Le proprietà sono organizzate in 8 gruppi espandibili così puoi trovare quello che ti serve istantaneamente — senza scorrere un elenco infinito.
Layout
Display, overflow, z-index e coordinate di posizione per blocchi assoluti.
Dimensioni
Dimensioni esplicite con vincoli min e max, tutte con selezione completa dell'unità.
Spaziatura
Margin e padding — impostali su tutti i lati contemporaneamente o su ogni lato individualmente.
Tipografia
Controllo testo completo — font, dimensione, peso, altezza riga, trasformazione, ombra e altro.
Sfondo
Colori solidi, URL immagine, gradienti CSS e integrazione completa con il media manager.
Bordo
Larghezza bordo, stile e colore per lato — più raggio angolo per ogni angolo individualmente.
Effetti
Opacità, drop shadow, filtri CSS (blur, brightness, contrast, grayscale), backdrop filter, blend mode e rotazione.
Flex
Controllo completo del container flex e dell'elemento flex — direzione, wrapping, allineamento, gap, grow, shrink e order.
L'unità giusta per ogni contesto
Ogni proprietà numerica ti permette di scegliere l'unità più adatta — mescola e abbina liberamente all'interno di una singola card.
px
Pixel
Dimensione fissa e assoluta. Precisa e prevedibile — ideale per bordi, ombre ed elementi a dimensione fissa.
%
Percentuale
Relativa all'elemento parent. Perfetta per layout fluidi che si adattano al loro container.
rem
Root em
Relativa alla dimensione font root. Ottima per una scalatura tipografica coerente su tutta la card.
em
Em
Relativa alla dimensione font dell'elemento corrente. Utile per spaziatura che scala con il testo.
vw
Larghezza viewport
Percentuale della larghezza del viewport del browser. Rende gli elementi veramente responsivi alla dimensione dello schermo.
vh
Altezza viewport
Percentuale dell'altezza del viewport del browser. Ideale per sezioni a piena altezza.
Controllo pixel-perfect su ogni dettaglio
Da una sottile ombra testo a uno sfondo con gradiente CSS completo — ogni dettaglio visuale è regolabile senza lasciare il builder.
Gradienti CSS
Inserisci qualsiasi gradiente CSS come immagine di sfondo — lineare, radiale, conico. Oppure usa un template di binding dinamico per generare gradienti da valori di entità.
linear-gradient(135deg, #667eea, #764ba2)
Backdrop Filter
Applica CSS backdrop-filter per creare effetti vetro smerigliato — blur, brightness e saturation sull'area dietro il blocco.
blur(12px) brightness(1.1)
Mix Blend Mode
Controlla come un blocco si fonde con gli elementi sotto di esso usando CSS mix-blend-mode — multiply, screen, overlay e altro.
multiply
Box Shadow
Aggiungi drop shadow o ombre interni con sintassi CSS completa — offset, blur, spread, colore e ombre multiple su un singolo blocco.
0 4px 24px rgba(0,0,0,0.15)
Stili che reagiscono allo stato dell'entità
Qualsiasi proprietà di stile può essere collegata a dati live delle entità di Home Assistant. Cambia il colore di sfondo in base alla temperatura, l'opacità in base allo stato di un interruttore, o le dimensioni in base al valore di un sensore numerico.
Ogni stile. Ogni blocco.
Installa CardBuilder e inizia a stilizzare le tue card con la piena potenza di CSS — nessun codice richiesto.