Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Modifichiamo le SVG con i CSS

209 vues

Publié le

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.

Publié dans : Internet
  • Soyez le premier à commenter

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

×