html5 e css3 - 3 | webmaster & webdesigner

of 22 /22
HTML5 e Css3 [1] Matteo Magni

Author: matteo-magni

Post on 29-Nov-2014

362 views

Category:

Technology


1 download

Embed Size (px)

DESCRIPTION

Terza lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

TRANSCRIPT

  • 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:[email protected]