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.

of

Modifichiamo le SVG con i CSS Slide 1 Modifichiamo le SVG con i CSS Slide 2 Modifichiamo le SVG con i CSS Slide 3 Modifichiamo le SVG con i CSS Slide 4 Modifichiamo le SVG con i CSS Slide 5 Modifichiamo le SVG con i CSS Slide 6 Modifichiamo le SVG con i CSS Slide 7 Modifichiamo le SVG con i CSS Slide 8 Modifichiamo le SVG con i CSS Slide 9 Modifichiamo le SVG con i CSS Slide 10 Modifichiamo le SVG con i CSS Slide 11 Modifichiamo le SVG con i CSS Slide 12 Modifichiamo le SVG con i CSS Slide 13 Modifichiamo le SVG con i CSS Slide 14 Modifichiamo le SVG con i CSS Slide 15 Modifichiamo le SVG con i CSS Slide 16 Modifichiamo le SVG con i CSS Slide 17 Modifichiamo le SVG con i CSS Slide 18 Modifichiamo le SVG con i CSS Slide 19 Modifichiamo le SVG con i CSS Slide 20 Modifichiamo le SVG con i CSS Slide 21 Modifichiamo le SVG con i CSS Slide 22 Modifichiamo le SVG con i CSS Slide 23 Modifichiamo le SVG con i CSS Slide 24 Modifichiamo le SVG con i CSS Slide 25 Modifichiamo le SVG con i CSS Slide 26 Modifichiamo le SVG con i CSS Slide 27 Modifichiamo le SVG con i CSS Slide 28 Modifichiamo le SVG con i CSS Slide 29 Modifichiamo le SVG con i CSS Slide 30 Modifichiamo le SVG con i CSS Slide 31 Modifichiamo le SVG con i CSS Slide 32 Modifichiamo le SVG con i CSS Slide 33 Modifichiamo le SVG con i CSS Slide 34 Modifichiamo le SVG con i CSS Slide 35 Modifichiamo le SVG con i CSS Slide 36 Modifichiamo le SVG con i CSS Slide 37 Modifichiamo le SVG con i CSS Slide 38 Modifichiamo le SVG con i CSS Slide 39 Modifichiamo le SVG con i CSS Slide 40 Modifichiamo le SVG con i CSS Slide 41 Modifichiamo le SVG con i CSS Slide 42 Modifichiamo le SVG con i CSS Slide 43 Modifichiamo le SVG con i CSS Slide 44 Modifichiamo le SVG con i CSS Slide 45 Modifichiamo le SVG con i CSS Slide 46 Modifichiamo le SVG con i CSS Slide 47 Modifichiamo le SVG con i CSS Slide 48 Modifichiamo le SVG con i CSS Slide 49
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

Modifichiamo le SVG con i CSS

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • DanieleMauro6

    Dec. 2, 2018
  • ale77dan

    Mar. 28, 2018

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.

Views

Total views

649

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

8

Shares

0

Comments

0

Likes

2

×