Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Modifichiamo le SVG con i CSS Ovvero come modificare le immagini nei nostri siti
Andrea Barghigiani Chi sono? https://skillsandmore.org
Non dimenticare di votarmi! https://joind.in/event/cssday-2018
Attenzione a questo logo!
Scalable Vector Graphics Il significato di SVG
Perché usare le SVG?
Perché usare le SVG? Guarda il video
Ma è bene usarle anche perché: • sono leggere (soprattutto con Gzip) • possono essere modificate
Come creare una SVG? Esistono molti altri editor, basta cercare ;)
Sapevi che le SVG sono simili all’HTML?
Prima di usarle è bene ottimizzarle!
Esistono diversi strumenti, il più semplice... SVGOMG
Come si usano le SVG?
Possiamo iniziare con il classico <img>
Richiamando il vecchio <object>
Oppure utilizzare un <iframe>
C’è chi preferisce un <embed>
Mentre altri si affidano ai CSS
Purtroppo nessuno di questi permette di modificare queste immagini con i CSS!
L’unico modo che ci permette di applicare modifiche con i CSS
La cascata dei CSS funziona anche con le SVG Ma in modo diverso
Esaminiamo una semplice immagine
Ecco il suo codice SVG
Sovrascrivi lo stile con i CSS inline
Sovrascrivi lo stile con i CSS inline
<style> all’interno del SVG
Usiamo i fogli di stile esterni index.html style.css
Quali sono le proprietà che possiamo personalizzare?
Purtroppo non possiamo modificare le tracce create in SVG, per quello serve JavaScript
Ma possiamo animare tutte le altre proprietà con del semplice CSS!
Per esempio, possiamo disegnare sulla pagina Guarda il video
Il codice CSS per disegnare l’immagine
Possiamo animare i singoli elementi SVG Guarda il video
Il codice CSS per animare singoli elementi
Questo effetto ci ha mostrato una differenza tra le trasformazioni CSS e SVG
La transform-origin si comporta diversamente CSS (50%, 50%) SVG (0, 0)
La transform-origin si comporta diversamente
Quando animiamo le SVG ricordiamoci che la transform- origin si allinea al contenitore e non al singolo elemento
La transform-origin si comporta diversamente Guarda il video
Il codice CSS per creare delle ombre per gli elementi di una SVG
Attenzione alle dimensioni della stessa SVG perché gli effetti non si applicano fuori di essa.
L’ombra non esce dall’area della SVG
L’unico limite è la tua immaginazione!
Puoi fornire suggerimenti Guarda il video
Animare un logo Guarda il video
Creare un semplice spinner Guarda il video
E se vuoi fare di più puoi iniziare a usare le librerie JavaScript dedicate • Snap.svg • SVG.js • vivus.js • Anime.js • Gr...
Piaciuta la presentazione? Votami ;) https://joind.in/event/cssday-2018
Grazie! https://skillsandmore.org
Próxima SlideShare
Cargando en…5
×

Modifichiamo le SVG con i CSS

206 visualizaciones

Publicado el

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.

Publicado en: Internet
no profile picture user

  • Sé el primero en comentar

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

×