Alla Scoperta di CSS3 Go!WebDesign

2,199 views

Published on

Scopriamo insieme l’utilizzo di questi nuove evoluzione HTML5 e CSS3, i servizi e strumenti 2.0 che stanno nascendo per agevolare l’apprendimento.

Attualmente queste evoluzioni non sono del tutto supportate dai browser, ma questo non ci deve impedire di conoscere gli usi e le tecniche basilari per tempi più maturi, in modo da essere un passo avanti agli altri.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,199
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
72
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Alla Scoperta di CSS3 Go!WebDesign

  1. 1. CSS3 ALLA SCOPERTA DI
  2. 2. STORIA – Alla Scoperta di CSS3 CSS2 Reccomandation W3C CSS2.1 working draft W3C CSS2.2 Proposta Specifica intermedia CSS3 Quando sarà una W3C Reccomandation? ai Maya l’ardua sentenza…
  3. 3. <selettori>
  4. 4. Selettori di Attributo – Alla Scoperta di CSS3 selettore[att^=&quot;val&quot;] Identifica gli elementi individuati da &quot;selettore&quot; che abbiano un attributo &quot;att&quot; che inizia con la stringa &quot;val&quot; selettore[att*=&quot;val&quot;] Identifica gli elementi individuati da &quot;selettore&quot; che abbiano un attributo &quot;att&quot; che contiene la stringa &quot;val&quot; selettore[att$=&quot;val&quot;] Identifica gli elementi individuati da &quot;selettore&quot; che abbiano un attributo &quot;att&quot; che termina con la stringa &quot;val&quot; COMPATIBILITA’
  5. 5. Selettori di Attributo – Alla Scoperta di CSS3 HTML <a href=&quot;file.pdf&quot;>link a un documento pdf</a> CSS3 a[href $ =&quot;.pdf&quot;] { background:url(&quot;icon_pdf.gif&quot;) no-repeat scroll right center transparent; } selettore[att$=&quot;val&quot;] COMPATIBILITA’
  6. 6. <shadow>
  7. 7. Ombre – Alla Scoperta di CSS3 COMPATIBILITA’ text-shadow: #999 3px 4px 5px -moz-box-shadow: 2px 2px 7px 0 #CCCCCC; -webkit-box-shadow: 2px 2px 7px 0 #CCCCCC;
  8. 8. <border radius>
  9. 9. Bordi Arrotondati – Alla Scoperta di CSS3 COMPATIBILITA’ -webkit-border-radius:5px; -moz-border-radius:5px;
  10. 10. <transform>
  11. 11. Rotazione – Alla Scoperta di CSS3 COMPATIBILITA’ -moz-transform: rotate(90dev) ; -webkit -transform: rotate(90dev) transform: rotate(90dev)
  12. 12. Rotazione – Alla Scoperta di CSS3 COMPATIBILITA’ -moz-transform:matrix(1, -0.2, 0, 1, 0pt, 0pt); -webkit-transform:matrix(1, -0.2, 0, 1, 0pt, 0pt); transform:matrix(1, -0.2, 0, 1, 0pt, 0pt);
  13. 13. <opacity>
  14. 14. Opacità – Alla Scoperta di CSS3 COMPATIBILITA’ #box { opacity: 0.7; } La proprietà assegna all’oggetto un valore di trasparenza compreso tra 0 e 1.
  15. 15. <RGBA>
  16. 16. RGBA – Alla Scoperta di CSS3 COMPATIBILITA’ #box { background-color: rgba(255,0,0,0.7); } La proprietà assegna all’oggetto 4 valori: 3 valori RGB e Opacità
  17. 17. <gradient>
  18. 18. Sfumature – Alla Scoperta di CSS3 COMPATIBILITA’ -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  19. 19. <background multipli>
  20. 20. Background Multipli – Alla Scoperta di CSS3 COMPATIBILITA’ #box{ background:url(aereo.png), url(sfondo.jpg) } aereo.png sfondo.jpg
  21. 21. <multicolonne>
  22. 22. Background Multipli – Alla Scoperta di CSS3 COMPATIBILITA’ <ul><li>div#multicolumn1 { </li></ul><ul><ul><ul><ul><ul><li>-moz-column-count:6; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>-moz-column-gap:10px; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>-moz-column-width:100px; </li></ul></ul></ul></ul></ul><ul><li>} </li></ul>
  23. 23. <@font-face>
  24. 24. Background Multipli – Alla Scoperta di CSS3 COMPATIBILITA’ @font-face{ font-family: ‘ Airstrip_Four ’; src: url(’http://www.miosito.it/font/ Airstrip_Four .ttf’); } h1 { font-family: ‘ Airstrip_Four ’; }
  25. 25. <speech>
  26. 26. Background Multipli – Alla Scoperta di CSS3 COMPATIBILITA’ #voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; } #voice-balance { -xv-voice-balance: left; } #speech-cue { cue-after: url(ding.wav); } #voice-rate { -xv-voice-rate: x-slow; } #voice-family { voice-family: female; } #voice-pitch { -xv-voice-pitch: x-low; } #speech-speak { speak: spell-out; }
  27. 27. <servizi 2.0>
  28. 28. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://www.findmebyip.com/litmus/
  29. 29. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://css3generator.com/
  30. 30. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://css3please.com/
  31. 31. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://border-radius.com/
  32. 32. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://gradients.glrzad.com/

×