HTML - CSS

La base di tutto il web

Mattepuffo's logo
Creare un loading dialog con i CSS

Creare un loading dialog con i CSS

Oggi vediamo come creare un loading dialog con i CSS.

Non useremo immagini, ma solo una combinazione di stile; useremo solo un scriptino Javascript per stoppare il loader.

In fin dei conti il loader andrà nascosto ad un certo punto, e al 99% sarà una operazione che farete in Javascript.

Mattepuffo's logo
Usare il componente datalist in HTML

Usare il componente datalist in HTML

Vediamo molto spesso nei siti web le caselle di input che suggeriscono il valore da selezionare mentre si scrive.

Questa cosa si può ottenere in diversi modi, e dipende ovviamente anche dalla mole di dati in cui cercare, e dalle tecnologie usate.

Mattepuffo's logo
Tabelle responsive in PrimeNG

Tabelle responsive in PrimeNG

PrimeNG ci fornisce tutta una serie componenti HTML da usare nei progetti Angular (e in verità non solo).

Oggi vediamo come far diventare una tabella responsive, partendo dalla documentazione ufficiale.

Mattepuffo's logo
Aggiungere virgole ad una lista HTML con CSS

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).

Mattepuffo's logo
Creare tabelle responsive in HTML con No More Tables

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.

Mattepuffo's logo
Link WhatsApp sulle pagine web

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.

Mattepuffo's logo
Centrare una label con CSS

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.