Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS3

758 views

Published on

Published in: Education
  • Be the first to comment

CSS3

  1. 1. CSS3 Trasformazioni e Animazioni salvatore.paone@gmail.com
  2. 2. Funzioni di trasformazioneApplicare uno più trasformazioni a unelemento significa intervenire sulle coordinateche ne determinano il posizionamento. Siutilizza la proprietà transform che grazie allefunzioni rotate, skew, scale e translatepossono apportare effetti dinamici di notevoleimpatto visivo senza lutilizzo di JavaScript.
  3. 3. Funzioni di trasformazioneCome sempre il supporto di tali proprietà.relative al modulo delle trasformazioni, adoggi, deve ancora fare largo uso dei prefissiproprietari dei principali browser.Estensione Supportotransform GC2+, FF3.5+, O10+, S3.1+, IE9transform-origin GC5+, FF3.5+, O10+, S3.1+, IE9
  4. 4. Funzioni di trasformazione | rotaterotate()ruota lelemento in senso orario per il numerodi gradi specificati, valori negativi indicano una rotazionein senso antiorario. Un valori pari a 360 lascia lelementoinvariato, valori superiori vengono consentiti. Esempio 1:/* rotazione in senso orario di 10 gradi */ #family { -ms-transform: rotate(10deg); -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
  5. 5. Funzioni di trasformazione | rotateEsempio 2:/* rotazione in senso antiorario di 15 gradi*/ #street { -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); }
  6. 6. Funzioni di trasformazione | rotateEsempio 3:/* rotazione in senso orario di 20 gradi */ #load { -ms-transform: rotate(380deg); -moz-transform: rotate(380deg); -webkit-transform: rotate(380deg); -o-transform: rotate(380deg); transform: rotate(380deg); }
  7. 7. Funzioni di trasformazione | rotate    Vediamo un esempio con HTML5 e CSS3
  8. 8. Funzioni di trasformazione | scalescale()modifica la dimensione dellelemento, accettauno o due argomenti: se il secondo non è specificato saràconsiderato identico al primo. Il primo valore esprime unavariazioni di larghezza, il secondo esprime la variazionedellaltezza. I valori sono espressi senza unità di misura.transform: scale(0.7); 
  9. 9. Funzioni di trasformazione | scaleEsempio 1: In questo caso si è optato per un valorepositivo minore di 1, ciò produce una riduzione delladimensione dellelemento.#man-sky { -ms-transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); }
  10. 10. Funzioni di trasformazione | scaleEsempio 2: In questo caso si è optato per un valorepositivo maggiore di 1, ciò produce un aumento delladimensione dellelemento.#monuments { -ms-transform: scale(1.3); -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }
  11. 11. Funzioni di trasformazione | scaleEsempio 3: In questo caso si è optato per un valorenegativo producendo il capovolgimento dellelemento:#monument2 { -ms-transform: scale(-0.6); -moz-transform: scale(-0.6); -webkit-transform: scale(-0.6); -o-transform: scale(-0.6); transform: scale(-0.6); }
  12. 12. Funzioni di trasformazione | scaleNegli esempi abbiamo sempre usato la funzione scale()impiegando un unico valore e ciò ha permesso di variarele dimensioni dellelemento mantenendone le proporzioni.Con le funzioni scalex() e scaley()invece siintroducono distorsioni nella proporzione.#man-sky { -ms-transform: scalex(0.7); -moz-transform: scalex(0.7); -webkit-transform: scalex(0.7); -o-transform: scalex(0.7); transform: scalex(0.7);}
  13. 13. Funzioni di trasformazione | scale    Vediamo un esempio con HTML5 e CSS3
  14. 14. Funzioni di trasformazione | skewskew()produce linclinazione dellelemento trasfor-mandolo in un rombo, anche qui possiamo avere duevalori, il secondo opzionale. Esempio 1:div { padding: 3px; width: 300px; -ms-transform: skew(10deg,20deg); -moz-transform: skew(10deg,20deg); -webkit-transform: skew(10deg,20deg); -o-transform: skew(10deg,20deg); transform: skew(10deg,20deg); }
  15. 15. Funzioni di trasformazione | skewCon le funzioni skewX() e skeveY()invece applicanola distorsione solo su uno dei due assi.Esempio 2:#test1 { -ms-transform: skewX(15deg); -moz-transform: skewX(15deg); -moz-transform: skewX(15deg); -webkit-transform: skewX(15deg); -o-transform: sskewX(15deg); transform: skewX(15deg); }
  16. 16. Funzioni di trasformazione | skewEsempio 3:#test2 { -ms-transform: skewY(15deg); -moz-transform: skewY(15deg); -webkit-transform: skewY(15deg); -o-transform: skewY(15deg); transform: skewY(15deg); }
  17. 17. Funzioni di trasformazione | skew    Vediamo un esempio con HTML5 e CSS3
  18. 18. Funzioni di trasformazione |translatetranslate()consente di spostare lelemento di unnumero di pixel definito sia rispetto allasse x e y. Mentrele funzioni translateX() e translateY()inveceagiscono ripettivamente solo sulla X o Y. Esempio 1:#test2 { -ms-transform: translate(300px,200px); -moz-transform: translate(300px,200px); -webkit-transform: translate(300px,200px); -o-transform: translate(300px,200px); transform: translate(300px,200px); }
  19. 19. Funzioni di trasformazione |translate    Vediamo un esempio con HTML5 e CSS3
  20. 20. Funzioni di trasformazione |transform-originTutte le trasformazioni viste fino ad ora usanoimplicitamente il centro dellelemento, ciòperché la proprietà transform-originha come valore predefinito (50%, 50%). Ilprimo valore si riferisce al piano orizzontaleorizzontale, il secondo al piano orizzontale; senon fosse presente sarebbe utilizzato il valorepredefinito 50%.
  21. 21. Funzioni di trasformazione |transform-origin-ms-transform-origin: 100% 0%;-moz-transform-origin: 100% 0%;-webkit-transform-origin: 100% 0%;-o-transform-origin: 100% 0%;transform-origin: 100% 0%;Questo listato identifica come origine dellatrasformazione langolo posto in alto a destra e in questocaso leventuale rotazione farebbe perno non attorno alcentro ma su suddetto angolo alto a destra. La proprietàpuò essere espressa anche con valori assoluti p.e.transform-origin: 100em 0em;o parole chiave:transform-origin: bottom right;
  22. 22. Funzioni di trasformazione |Trasformazioni multipleTutte le trasformazioni viste sono state presesingolarmente, ma p possibile creare delle sequenze il cuirisultato finale sarà dato dalla somma degli effettiprodotti dalle singole funzioni di trasformazione. Potremodunque scrivere:transform: rotate(20deg) translate(100px,50px) scale(1.2, 1.2);per avere un elemento ruotato di 20 gradi, spostato di100px a destra e di 50px in basso e un fattore diridimensionamento di 1.2. Non essendo menzionato iltutto avverrà con un transform-origin centratoallelemento.
  23. 23. Trasformazioni e AnimazioniLe trasformazioni e le animazioni ottenute unicamentetramite i CSS3 sono probabilmente la novità piùinteressante i nquanto consente di ottenere con i soli foglidi stile effetti grafici di grande impatto. La modificaimmediata di del valore di una proprietà viene espressanel seguente modo:p {background-color: #efefef;}p:hover {background-color: #bbbbbb;}leffetto roll-over ottenuto e immediato e privo ditransizioni ma con laggiunta di una transizione questodiverrà graduale.
  24. 24. Trasformazioni con transizioni/* proprietà interpretate solo da Chrome eSafari */-webkit-transition-property: background-color;-webkit-transition-duration: 3s;/* Le proprietà ufficiali come definitenella specifica. È buona norma inserirlesempre, inoltre si avrà cura di aggiungerlesolo dopo l’elenco delle proprietà conprefissi proprietari */transition-property: background-color;transition-duration: 3s;
  25. 25. AnimazioniAnche qui il supporto è garantito solo con lutilizzo delleestensioni proprietarie ma il risultato è estremamenteinteressante richiedendo valori specifici per le proprietàoggetto dellanimazione. Per raggiungere un controllo dialto livello sulla modalità di svolgimento di unaanimazione si ricorre alla regola: @keyframes@keyframes<identificativo_univoco_animazione> { percentuale { /* una o più dichiarazioni css */ }}
  26. 26. Animazioni@keyframes cinquecolori { 0% {color: #3b86ca;} 30% {color: #337fab;} 60% {color: #3b778c;} 90% {color: #67696b;} 100% {color: #8e584b;}}Ogni regola definisce una sorta di linea temporale lunga laquale si snodano cinque diversi set di dichiarazioni.

×