HTML5 e Css3 - 3 | WebMaster & WebDesigner

588 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
588
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 e Css3 - 3 | WebMaster & WebDesigner

  1. 1. HTML5 e Css3 [1]Matteo Magni
  2. 2. Quale sono i problemi principali che incontratequando scrivete i CSS2?
  3. 3. ● Gestione delle decorazioni● Disordine nel markup html che ci toccaaggiungere● Troppo Javascript per la presentazioneProblemi?
  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 paginasenza 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 delbordo● padding-box → si estende nellarea del padding● content-box → solo nellarea del contenuto
  10. 10. Bordi arrotondati History//una volta ci servivano 4 immagini più un html di questo tipo<div id="mainContent"> <div id="bodyText"> <p>Lorem ipsum dolor etc …</p> </div> <div id="contentBottom">  <div id="innerBottom">&nbsp;</div><!­­ end #innerBottom ­­> </div><!­­ end #contentBottom ­­></div><!­­ end #mainContent →/*css che usa 4 immagini degli angoli tondi*/#contentBottom{background:url("corner_bottom_left.gif") bottom left no­repeat;  background­color:#dadada;}....#innerBottom {background:url("corner_bottom_right.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 { /*vertical radius*/  border­radius: 12px/24px;  border: 10px solid red;  background­color:red;}   #radius3 { /*horizontal radius*/  border­radius: 24px/12px;  border: 10px solid red;  background­color:red;}   #radius4 {/*top left, top right, bottom right, bottom left*/border­radius: 40px 50% 10px 20%;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-radiusSupporto 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://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me

×