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

1. HTML5 e Css3 [1]
Matteo Magni

2. Quale sono i problemi principali che incontrate
quando scrivete i CSS2?

3. ● Gestione delle decorazioni
● Disordine nel markup html che ci tocca
aggiungere
● Troppo Javascript per la presentazione
Problemi?

5. 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

6. Opacity
div { color: #00c;
opacity: 1.0; }!
div { color: #00c;
opacity: 0.5; }!

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

9. ● 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);
}

11. 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;
}

12. background-clip
● border-box → lo sfondo si estende fino all'area del
bordo
● padding-box → si estende nell'area del padding
● content-box → solo nell'area del contenuto

13. 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_botto
m_left.gif") bottom left no­
repeat;
background­color:#dadada;
}
....
#innerBottom {
background:url("corner_botto
m_right.gif") bottom right
no­repeat;
}

14. Bordi arrotondati
#radius1 {
/*­webkit­border­radius: 12px;
­moz­border­radius: 12px;*/
border­radius: 12px;
border: 10px solid red;
background­color:red;
}

15. 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;
}

17. ● border-top-left-radius
● border-top-right-radius
● border-bottom-right-radius
● border-bottom-left-radius
● border-radius
Supporto senza i prefissi proprietari

18. Box-shadow
#shadow1 {
box­shadow: 5px
5px 10px 2px blue;
}
#shadow2 {
box­shadow: 5px
5px 10px 2px red;
}

19. Box Shadow
1)spostamento in senso orizzontale
2)spostamento in senso verticale
3) il livello di sfocatura (blur radius)
• Più grande più l'ombra sarà sfocata
4)livello di diffusione
• Più è alto più lombra tende ad espandersi

20. inset
#shadow3 {
box­shadow:
5px 5px 10px 2px
orange inset;
}

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