Il documento discute le sfide e i problemi comuni associati alla scrittura di CSS2, inclusa la gestione delle decorazioni, il disordine nel markup HTML e la complessità di mantenimento. Viene evidenziato anche l'uso di nuove funzionalità in CSS3, come la gestione dei colori tramite HSLA e bordi arrotondati, e le ottimizzazioni per le ombre con la proprietà box-shadow. Infine, viene fornito un link alle slide e al codice utilizzato nel progetto.

1. HTML5 e Css3 [1]
Matteo Magni

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

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

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 /*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;
}

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 { #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;
}

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://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me