HTML5 e Css3 - 3 | WebMaster & WebDesigner

622 views

Published on

Terza lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Published in: Technology
  • Be the first to comment

HTML5 e Css3 - 3 | WebMaster & WebDesigner

  1. 1. HTML5 e Css3 [1]Matteo Magni
  2. 2. Quale sono i problemi principali che incontrate quando scrivete i CSS2?
  3. 3. Problemi?● Gestione delle decorazioni● Disordine nel markup html che ci tocca aggiungere● Troppo Javascript per la presentazione
  4. 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 pagina senza di esse
  5. 5. Opacitydiv { color: #00c; opacity: 1.0; }! div { color: #00c; opacity: 0.5; }!
  6. 6. HSLa● Tonalità (Hue)● Saturazione (Saturation)● Luminosità (Lightness)● Trasparenza (alpha)In aggiunta al RGBa ma forse più chiaro
  7. 7. ● Esempi: ● tonalità rossa useremo 0 ● per il giallo 60 ● per il verde 120 #alpha {    color: rgba(255,255,255,.8);    background­color: hsla(200,100%, 50%, .5);    border: 20px solid rgba(0,0,0,.3); }   
  8. 8. background-clip #alpha {    color: rgba(255,255,255,.8);    background­color: hsla(200,100%, 50%, .5);    border: 20px solid rgba(0,0,0,.3);    background­clip: padding­box; }   
  9. 9. background-clip ● border-box → lo sfondo si estende fino allarea del bordo ● padding-box → si estende nellarea del padding ● content-box → solo nellarea del contenuto
  10. 10. Bordi arrotondati History//una volta ci servivano 4 immagini  /*css che usa 4 immagini degli più un html di questo tipo angoli tondi*/<div id="mainContent"> #contentBottom{ <div id="bodyText"> background:url("corner_bottom_l <p>Lorem ipsum dolor etc …</p> eft.gif") bottom left no­ </div> repeat; <div id="contentBottom">   background­color:#dadada;  <div id="innerBottom">&nbsp;</div><!­­  }end #innerBottom ­­> .... </div><!­­ end #contentBottom ­­> #innerBottom {</div><!­­ end #mainContent → background:url("corner_bottom_r ight.gif") bottom right no­ repeat; }
  11. 11. Bordi arrotondati #radius1 {/*­webkit­border­radius: 12px;  ­moz­border­radius: 12px;*/  border­radius: 12px;  border: 10px solid red;  background­color:red;}  
  12. 12. Bordi arrotondati #radius2 { #radius4 { /*vertical radius*/ /*top left, top right,   border­radius: 12px/24px; bottom right, bottom left*/  border: 10px solid red; border­radius: 40px 50%   background­color:red; 10px 20%;}    border: 10px solid red;#radius3 { background­color:red; /*horizontal radius*/ }     border­radius: 24px/12px;  border: 10px solid red;  background­color:red;}   
  13. 13. ● border-top-left-radius● border-top-right-radius● border-bottom-right-radius● border-bottom-left-radius● border-radius Supporto senza i prefissi proprietari
  14. 14. Box-shadow #shadow1 {box­shadow: 5px 5px 10px 2px blue;}                #shadow2 {         box­shadow: 5px 5px 10px 2px red;} 
  15. 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. 16. inset#shadow3 {     box­shadow: 5px 5px 10px 2px orange inset;}
  17. 17. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×