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.

Modifichiamo le SVG con i CSS

125 views

Published on

Presentazione per il CSSDay 2018, puoi votare qua: https://joind.in/talk/e84d1

Le Scalable Vector Graphics sono uno standard da moltissimi anni e permettono di ridurre il tempo di caricamento dei nostri siti web e di presentare delle immagini vettoriali completamente scalabili. Molto spesso però non si sa come sia possibile modificarle grazie ai CSS ed è per questo motivo che in questa presentazione di presenterò come farlo e addirittura come animare queste immagini.

Published in: Internet
  • Be the first to comment

Modifichiamo le SVG con i CSS

  1. 1. Modifichiamo le SVG con i CSS Ovvero come modificare le immagini nei nostri siti
  2. 2. Andrea Barghigiani Chi sono? https://skillsandmore.org
  3. 3. Non dimenticare di votarmi! https://joind.in/event/cssday-2018
  4. 4. Attenzione a questo logo!
  5. 5. Scalable Vector Graphics Il significato di SVG
  6. 6. Perché usare le SVG?
  7. 7. Perché usare le SVG? Guarda il video
  8. 8. Ma è bene usarle anche perché: • sono leggere (soprattutto con Gzip) • possono essere modificate
  9. 9. Come creare una SVG? Esistono molti altri editor, basta cercare ;)
  10. 10. Sapevi che le SVG sono simili all’HTML?
  11. 11. Prima di usarle è bene ottimizzarle!
  12. 12. Esistono diversi strumenti, il più semplice... SVGOMG
  13. 13. Come si usano le SVG?
  14. 14. Possiamo iniziare con il classico <img>
  15. 15. Richiamando il vecchio <object>
  16. 16. Oppure utilizzare un <iframe>
  17. 17. C’è chi preferisce un <embed>
  18. 18. Mentre altri si affidano ai CSS
  19. 19. Purtroppo nessuno di questi permette di modificare queste immagini con i CSS!
  20. 20. L’unico modo che ci permette di applicare modifiche con i CSS
  21. 21. La cascata dei CSS funziona anche con le SVG Ma in modo diverso
  22. 22. Esaminiamo una semplice immagine
  23. 23. Ecco il suo codice SVG
  24. 24. Sovrascrivi lo stile con i CSS inline
  25. 25. Sovrascrivi lo stile con i CSS inline
  26. 26. <style> all’interno del SVG
  27. 27. Usiamo i fogli di stile esterni index.html style.css
  28. 28. Quali sono le proprietà che possiamo personalizzare?
  29. 29. Purtroppo non possiamo modificare le tracce create in SVG, per quello serve JavaScript
  30. 30. Ma possiamo animare tutte le altre proprietà con del semplice CSS!
  31. 31. Per esempio, possiamo disegnare sulla pagina Guarda il video
  32. 32. Il codice CSS per disegnare l’immagine
  33. 33. Possiamo animare i singoli elementi SVG Guarda il video
  34. 34. Il codice CSS per animare singoli elementi
  35. 35. Questo effetto ci ha mostrato una differenza tra le trasformazioni CSS e SVG
  36. 36. La transform-origin si comporta diversamente CSS (50%, 50%) SVG (0, 0)
  37. 37. La transform-origin si comporta diversamente
  38. 38. Quando animiamo le SVG ricordiamoci che la transform- origin si allinea al contenitore e non al singolo elemento
  39. 39. La transform-origin si comporta diversamente Guarda il video
  40. 40. Il codice CSS per creare delle ombre per gli elementi di una SVG
  41. 41. Attenzione alle dimensioni della stessa SVG perché gli effetti non si applicano fuori di essa.
  42. 42. L’ombra non esce dall’area della SVG
  43. 43. L’unico limite è la tua immaginazione!
  44. 44. Puoi fornire suggerimenti Guarda il video
  45. 45. Animare un logo Guarda il video
  46. 46. Creare un semplice spinner Guarda il video
  47. 47. E se vuoi fare di più puoi iniziare a usare le librerie JavaScript dedicate • Snap.svg • SVG.js • vivus.js • Anime.js • GreenSock
  48. 48. Piaciuta la presentazione? Votami ;) https://joind.in/event/cssday-2018
  49. 49. Grazie! https://skillsandmore.org

×