Impostare un gradient alle immagini con i CSS

La proprietà mask-image di CSS ci consente di creare delle "mask" alle immagini.

Oggi vediamo come usarla per creare dei gradient.

Ma penso ci siano anche altre utili utilizzi.

Aggiungere virgole ad una lista HTML con CSS

Ho scoperto che i CSS in realtà sono più "potenti" di quello che sembra, e che tante cose che facciammo ad esempio in Javascript, le possiamo direttamente con qualche trick.

Ad esempio, oggi aggiungiamo le virgole ad una lista HTML; in genere per farlo usiamo il linguaggio lato server (perchè magari estraiamo la lista da db e poi la elaboriamo).

Controllo del formato del Codice Fiscale in HTML

Partiamo dal presupposto che parliamo di un controllo del formato del Codice Fiscale, e non della sua validità.

Quindi andiamo solo a verificare che abbia una corretta struttura.

Creare tabelle responsive in HTML con No More Tables

Precisiamo subito che No More Tables non è un plugin / libreria, ma possiamo definirla una tecnica per rendere le tabella HTML responsive.

Questa tecnica è stata inventata da Chris Coyier, ed oggi ne vediamo un esempio.

In sostanza si tratta di una serie di regole CSS con l'aiuto di un attributo da dare alle celle delle righe.

Link WhatsApp sulle pagine web

Piccolo snippet di codice HTML per impostare un link a WhatsApp.

In pratica cliccando sul link si aprirà direttamente WhatsApp, con la casella di testo già riempita.

E pronto ad inviare il messaggio al numero impostato.

Centrare una label con CSS

Non se ci avete mai fatto caso, ma le label, in HTML, sono sempre allineate a sinistra.

Questo perchè le label sono degli elementi "inline", e non basta il classico text-align per allnearle come vogliamo.

Centrare il logo nella navbar di Bootstrap 4

Su un piccolo progetto sto usando la navbar di Bootstrap 4 solo per visualizzare il logo e richiamare il colore di un sito affiliato.

Di default tutti gli esempi che troviamo nel sito mettono il logo a sinistra.

Identificare il color scheme impostato usando i CSS

Come sapete alcuni sistemi operativi danno la possibilità di impostare il color scheme come dark o light.

Il primo esempio che mi viene in mente è macOS, che da qualche versione da la possibilità di impostare il tema dark.

Bloccare l'autocomplete nelle input password in HTML

L'HTML ha l'attributo autcomplete impostato di default a true che fa in modo che i campi di un form si autocompletino con i valori salvati nel browser.

In un form ho la necessità che il campo password non si autcompleti.

Ma autocomplete="false" non basta.

Colonne di Boostrap 4 a dimensione fissa

C'è chi purtroppo non si accontenta mai di nulla, e deve rompere fino all'inverosimile.

E così mi è capitato di dover impostare delle dimensioni fisse ad una colonna della grdi di Bootstrap 4.

In sostanza, partendo da qui:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-11"></div>
        <div class="col-md-1 sx_striscia"></div>
    </div>
</div>