CARLO FRINOLLI
email: carlo.frinolli@nois3.it
fb: www.facebook.com/carlo.frinolli
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.
non avete capito tutto.
Neanche tu Roman. :P
Offcanvas non è ancora di interesse comune anche
Abbiamo imparato a conoscere le proprietà css.
Sappiamo cambiare i bordi, i colori, le dimensioni.
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;
}
transition-property
transition-duration
Esprime la durata la transizione stessa,
transition-timing-function
Esprime la funzione di interpolazione
transition-delay
Esprime il ritardo con cui esegue 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;
}
ovviamente le transizioni si possono applicare a una sola proprietà carlo frinolli | web design I | IED 2013/2014
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
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
carlo frinolli | web design I | IED 2013/2014
Ma non solo. Eh sì. La vita è una guerra.
carlo frinolli | web design I | IED 2013/2014
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