Come si usa
- Apri la scheda Tabella per creare una tabella, oppure la scheda Box Shadow per un'ombra.
- Per una tabella, imposta il numero di righe e colonne, la larghezza della tabella e lo spessore del bordo. Per un'ombra, muovi i cursori di offset, sfocatura e diffusione.
- Controlla l'anteprima, poi usa l'icona di copia sopra il blocco di codice.
La scheda Tabella crea una tabella HTML con una riga di intestazione e il numero di righe e colonne del corpo che hai impostato. Le celle di intestazione sono riempite con testi come Header 1 e le celle del corpo con testi come Cell 1-1, che puoi sostituire con i tuoi contenuti. Il campo larghezza accetta qualsiasi valore di larghezza CSS, con 100% come predefinito, e il campo bordo imposta lo spessore del bordo in pixel. Il codice copiato inizia con un blocco style per una classe chiamata gen-table che imposta bordi uniti, padding delle celle, un'intestazione colorata, righe pari a strisce e un colore al passaggio del mouse, seguito dal markup della tabella.
La scheda Box Shadow produce una singola dichiarazione box-shadow. Puoi controllare l'offset orizzontale e l'offset verticale (da -50 a 50 px), il raggio di sfocatura (da 0 a 100 px), la diffusione (da -50 a 50 px), il colore dell'ombra come valore di colore CSS e un'opzione inset per un'ombra interna. Il colore predefinito è un nero chiaro e trasparente. Il riquadro di anteprima si aggiorna mentre muovi i cursori.
Entrambe le schede mostrano il codice in un blocco con un pulsante di copia. Il numero di righe e colonne deve essere almeno 1 e il valore del bordo almeno 0.
Il codice viene generato nel tuo browser e non viene caricato nulla.
Domande frequenti
La tabella ha già uno stile?
Sì. Il risultato include un blocco style per la classe gen-table, con bordi, padding, intestazione colorata, righe a strisce e un colore al passaggio del mouse. Puoi modificarlo o rimuoverlo.
Posso unire celle o aggiungere didascalie?
No. Il generatore crea una semplice griglia con una riga di intestazione. Se ti serve di più, modifica il markup copiato.
Cosa fa il valore di diffusione in un'ombra?
Ingrandisce o riduce l'ombra prima della sfocatura. I valori positivi la rendono più grande, quelli negativi più piccola.
Posso creare un'ombra interna?
Sì. Spunta l'opzione inset e il risultato termina con la parola chiave inset.
Quello che inserisco viene inviato da qualche parte?
No. Il codice viene creato nel tuo browser.