Alla Scoperta di CSS3 Go!WebDesign
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Alla Scoperta di CSS3 Go!WebDesign

on

  • 2,279 views

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

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.

Statistics

Views

Total Views
2,279
Views on SlideShare
2,187
Embed Views
92

Actions

Likes
2
Downloads
50
Comments
0

4 Embeds 92

http://gowebdesign.it 83
http://www.linkedin.com 6
http://www.slideshare.net 2
file:// 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Alla Scoperta di CSS3 Go!WebDesign Presentation Transcript

  • 1. CSS3 ALLA SCOPERTA DI
  • 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. <selettori>
  • 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. 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. <shadow>
  • 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. <border radius>
  • 9. Bordi Arrotondati – Alla Scoperta di CSS3 COMPATIBILITA’ -webkit-border-radius:5px; -moz-border-radius:5px;
  • 10. <transform>
  • 11. Rotazione – Alla Scoperta di CSS3 COMPATIBILITA’ -moz-transform: rotate(90dev) ; -webkit -transform: rotate(90dev) transform: rotate(90dev)
  • 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. <opacity>
  • 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. <RGBA>
  • 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. <gradient>
  • 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. <background multipli>
  • 20. Background Multipli – Alla Scoperta di CSS3 COMPATIBILITA’ #box{ background:url(aereo.png), url(sfondo.jpg) } aereo.png sfondo.jpg
  • 21. <multicolonne>
  • 22. Background Multipli – Alla Scoperta di CSS3 COMPATIBILITA’
    • div#multicolumn1 {
            • -moz-column-count:6;
            • -moz-column-gap:10px;
            • -moz-column-width:100px;
    • }
  • 23. <@font-face>
  • 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. <speech>
  • 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. <servizi 2.0>
  • 28. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://www.findmebyip.com/litmus/
  • 29. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://css3generator.com/
  • 30. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://css3please.com/
  • 31. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://border-radius.com/
  • 32. Servizi 2.0 – Alla Scoperta di CSS3 LINK http://gradients.glrzad.com/