Web Design I

FORM, TRANSIZIONI E ANIMAZIONI CSS (pt.II)

CARLO FRINOLLI

email: carlo.frinolli@nois3.it

fb: www.facebook.com/carlo.frinolli

Allora.

Se avete dubbi e avete fatto il vostro dovere... :)

Se avete dubbi e non avete fatto il vostro dovere :|

Se non avete dubbi e non avete fatto il vostro dovere...

sappiate che non è vero che avete capito tutto.

No.

non avete capito tutto.

Neanche tu Roman. :P

Avete dubbi di interesse comune?

Offcanvas non è ancora di interesse comune anche

Siete diventati amici di <form>?

Il css e le sue gioie.

Abbiamo imparato a conoscere le proprietà css.

Sappiamo cambiare i bordi, i colori, le dimensioni.

Ma non trovate che sia un po' bruto?

Emanuele ha barato!

Vi ha fatto copiare un pezzo di codice  per far apparire

fluidi gli effetti di hover...

Ma cosa significa?

            definizione di transizione

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

div {
  transition: background-color 0.5s ease;
  background-color: red;
}

div:hover {
  background-color: green;
}

Dissezioniamola

transition-property

Nel dettaglio:

transition-duration

Nel dettaglio:

transition-timing-function

Nel dettaglio:

transition-delay

Come funziona quindi?

Quando un elemento stilato cambia una o più proprietà

e su questa/e proprietà viene definita una transizione

allora questa cambierà seguendo la suddetta transizione.

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

Facciamo un esempio

carlo frinolli | web design I | IED 2013/2014

Quindi?

Casi d'uso

Avere una transizione più morbida e fluida

sugli hover dei {link,bottoni,testi,div}

Creare effettistica solo tramite css

attraverso trigger dell'utente

Idee?

carlo frinolli | web design I | IED 2013/2014

Ripassino: gli pseudo-attributi

selector:hover {
  background:white;
}

selector:active {
  background:white;
}

selector:focus {
  background:white;
}

Eh sì, ognuno di queste fa cambiare le proprietà

interagendo con il puntatore del mouse (o col dito...)

Chiamiamoli trigger.

carlo frinolli | web design I | IED 2013/2014

Sembra bello tutto ma?

carlo frinolli | web design I | IED 2013/2014

IE.

Ma non solo. Eh sì. La vita è una guerra.

carlo frinolli | web design I | IED 2013/2014

Compatibilità

Per evitare problemi di compatibilità bisogna usare

i vendor prefix.

esempio

-webkit-transition: 
   -moz-transition: 
     -o-transition: 

carlo frinolli | web design I | IED 2013/2014