Data una larghezza fissa puoi dire al tuo elemento di prendersi tanto spazio a sinistra quanto a destra, in modo da posizionarsi ESATTAMENTE al centro su ogni dispositivo

See the Pen
Untitled by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Usare i flexbox e/o i grid items è nel web moderno ormai un must.

Ecco dunque un modo per centrare un div/elemento orizzontalmnente (justify-content: center;) e verticalmente (align-items: center;)

See the Pen
Center div using flexbox by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Usando l’interazione del position absolute dentro un elemento con position relative possiamo dire agli elementi child di posizionarsi esattamente al centro dell’elemento parent

See the Pen
Untitled by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Condividi questo articolo su:

Details è un modo molto semplice e veloce per creare una sorta di accordion molto velocemente.

Cliccando sul ‘Accordion Titolo 1’ infatti viene aperto il tag e possiamo visualizzare tutto il contenuto al suo interno, comodo no?

See the Pen
Accordion with HTML by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Hai bisogno di evidenziare un testo in modo semplice?

Il Tag mark fa esattamente al caso tuo, di default evidenzia il testo con il classico giallo, come un evidenziatore.. ma puoi personalizzarlo esattamente come preferisci con qualche riga di css 😉

See the Pen
Mark Tag by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Il tag Meter definisce una barra di completamento all’interno di una unità di misura o di una misura conosciuta

Meter può essere molto utile ed immediato, ti lascio una lista di alcuni attributi che possono fare al caso tuo:

• Value: Si riferisce al valore numerico corrente. Deve essere compreso tra il valore minimo e massimo.
• Min: È il limite numerico inferiore dell’intervallo misurato. Deve essere inferiore al valore massimo, se menzionato.
• Max: È il limite numerico superiore dell’intervallo misurato. Deve essere maggiore del valore minimo, se menzionato.
• Low: Si riferisce al limite numerico superiore dell’intervallo misurato inferiore.
• High: Si riferisce al limite numerico inferiore dell’intervallo misurato di fascia alta.
• Optimum: Indica l’intervallo numerico ottimale.

See the Pen
Meter Tag by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Un input con il calendario pronto all’utilizzo, ma davvero?!

Ebbene si, html di base ti offre anche questo! Un input data pronto ad essere utilizzato nei tuoi form 😀

See the Pen
Input type Date by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Quante volte ti è capitato di dover sbarrare un testo o sottolinearlo di default e hai ricorso a del css? Beh, potevi farlo anche con un semplice tag html, d’altronde html è un codice semantico 😛

Ammettilo, anche tu avresti creato il tutto con del css.. ma perchè complicarsi la vita?

See the Pen
Ins e Del by MirkoDev (@mirkodeveloper-the-bold)
on CodePen.

Condividi questo articolo su: