Ho scoperto che con i CSS è possibile applicare filtri alle immagini in maniera molto semplice.

Questi sono i filtri disponibili:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

A parte il filtro url() gli altri hanno una sintassi molto semplice, e sono tutti filtri "pre-impostati".

Flexbox è un nuovo tipo di layout da usare con CSS3.

In pratica permette di creare dei layout "flessibili" e facilmente responsive in breve tempo.

Da quanto ho capito, anche Twitter Bootsrap 4 lo userà come base per il suo nuovo layout system.

Per usarlo in maniera più semplice, esiste un helper HTML: Flex Layout Attribute!

In pratica è un semplice foglio di stile.

In genere è sempre buona norma validare i dati di un form sia lato server che lato client.

Per quanto riguarda il client, ci siamo sempre avvalsi di Javascript (o di uno dei milioni plugin per jQuery).

Ma con HTML 5 possiamo farne a meno.

Anche se il supporto dei browser non è al 100%, ci rimane comunque la parte server; quindi, per quanto mi riguarda, preferisco evitare l'uso dei plugin o di Javascript per fare questo (almeno quando possibile).

Vi propongo oggi una lista di metodi per nascondere gli elemtni di una pagina web usando i CSS.

Non so se ce ne siano altri, e non saprei neanche dirvi quale sia il migliroe.

Io in genere per abitudine uso l'attributo display, quindi cominciamo da questo.

La proprietà clip-path di CSS 3 ci permette di "clippare" parti di una pagina senza ricorrere ad immagini create ad-hoc o ad altri tecnicismi.

Ad oggi (20 giugno 2016) non è compatibile con Firefox, ma potete testarlo su Chrome e Safari.

Qui vi propongo due esempi:

  • in uno clippiamo una immagine creando un rombo
  • nell'altro tagliamo una parte del titolo

Tendenzialmente l'autocompletamento nei form HTML è più che comodo.

Ma ci possono essere dei casi in cui vogliamo disabilitarlo.

Farlo è molto semplice usando l'attributo autocomplete (che fantasia eh!).

Supponiamo di avere una tabella HTML, dalla quale dobbiamo nascondere una specifica colonna: come possiamo fare usando i CSS?

Semplicemente usando il selettore nth-child.

Quando usiamo gli ion-toggle in Ionic, di default la lista diventa non cliccabile.

Questo fa si che potete solo usare il toggle, ma non potete usare le voci come link.

Questo "problema" è facilmente aggirabile.

Ho creato un nuovo progetto con Ionic di tipo sidemenu.

La struttura iniziale è molto comoda, in quanto ci sono molte cose pre-confezionate; come ad esempio la navbar comune a tutte le pagine.

Solo che insieme alla navbar c'è anche l'icona per il menu laterale; menu che non si deve vedere se l'utente non ha eseguito il login.

Solitamente, per creare un counter all'interno delle nostre pagine web, usiamo due approcci:

  • usare una lista HTML
  • usare una variabile come counter (o variabile Javascript, PHP, ecc...non importa)

Con i CSS3 abbiamo una nuova modalità, senza usare ne liste ne variabili counter.