1. HTML5 e Css3 [1]Matteo Magni

2. Quale sono i problemi principali che incontratequando scrivete i CSS2?

3. Gestione delle decorazioni Disordine nel markup html che ci toccaaggiungere Troppo Javascript per la presentazioneProblemi?

4. Gestione delle decorazioni Difficili da mantenere nel tempo Ci occupano molta banda Fare molte Request HTTP aggiunge lentezza Il css difficile da capire Gli utenti spesso si trovano a vedere la paginasenza di esse

5. Opacitydiv{color:#00c;opacity:1.0;}!div{color:#00c;opacity:0.5;}!

6. HSLa Tonalit (Hue) Saturazione (Saturation) Luminosit (Lightness) Trasparenza (alpha)In aggiunta al RGBa ma forse pi chiaro

7. Esempi: tonalit rossa useremo 0 per il giallo 60 per il verde 120#alpha{color:rgba(255,255,255,.8);backgroundcolor:hsla(200,100%,50%,.5);border:20pxsolidrgba(0,0,0,.3);}

8. background-clip#alpha{color:rgba(255,255,255,.8);backgroundcolor:hsla(200,100%,50%,.5);border:20pxsolidrgba(0,0,0,.3);backgroundclip:paddingbox;}

9. background-clip border-box lo sfondo si estende fino allarea delbordo padding-box si estende nellarea del padding content-box solo nellarea del contenuto

10. Bordi arrotondati History//unavoltaciservivano4immaginipiunhtmldiquestotipo

Loremipsumdoloretc

11. Bordi arrotondati#radius1{/*webkitborderradius:12px;mozborderradius:12px;*/borderradius:12px;border:10pxsolidred;backgroundcolor:red;}

12. Bordi arrotondati#radius2{/*verticalradius*/borderradius:12px/24px;border:10pxsolidred;backgroundcolor:red;}#radius3{/*horizontalradius*/borderradius:24px/12px;border:10pxsolidred;backgroundcolor:red;}#radius4{/*topleft,topright,bottomright,bottomleft*/borderradius:40px50%10px20%;border:10pxsolidred;backgroundcolor:red;}

13. border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-radiusSupporto senza i prefissi proprietari

14. Box-shadow#shadow1{boxshadow:5px5px10px2pxblue;}#shadow2{boxshadow:5px5px10px2pxred;}

15. Box Shadow1)spostamento in senso orizzontale2)spostamento in senso verticale3) il livello di sfocatura (blur radius) Pi grande pi lombra sar sfocata4)livello di diffusione Pi alto pi lombra tende ad espandersi

16. inset#shadow3{boxshadow:5px5px10px2pxorangeinset;}

17. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me