Download - HTML5 e Css3 - 3 | WebMaster & WebDesigner
![Page 1: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/1.jpg)
HTML5 e Css3 [1]Matteo Magni
![Page 2: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/2.jpg)
Quale sono i problemi principali che incontrate quando scrivete i CSS2?
![Page 3: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/3.jpg)
● Gestione delle decorazioni
● Disordine nel markup html che ci tocca aggiungere
● Troppo Javascript per la presentazione
Problemi?
![Page 4: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/4.jpg)
![Page 5: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/6.jpg)
Opacity
div { color: #00c; opacity: 1.0; }!
div { color: #00c; opacity: 0.5; }!
![Page 7: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/7.jpg)
HSLa
● Tonalità (Hue) ● Saturazione (Saturation)● Luminosità (Lightness)
● Trasparenza (alpha)
In aggiunta al RGBa ma forse più chiaro
![Page 8: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/8.jpg)
![Page 9: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/9.jpg)
● 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: 20px solid rgba(0,0,0,.3);
}
![Page 10: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/10.jpg)
![Page 11: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/11.jpg)
background-clip
#alpha {
color: rgba(255,255,255,.8);
backgroundcolor: hsla(200,100%, 50%, .5);
border: 20px solid rgba(0,0,0,.3);
backgroundclip: paddingbox;
}
![Page 12: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/12.jpg)
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
![Page 13: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/13.jpg)
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"> </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 norepeat;
backgroundcolor:#dadada;
}
....
#innerBottom {
background:url("corner_bottom_right.gif") bottom right norepeat;
}
![Page 14: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/14.jpg)
Bordi arrotondati
#radius1 {
/*webkitborderradius: 12px;
mozborderradius: 12px;*/
borderradius: 12px;
border: 10px solid red;
backgroundcolor:red;
}
![Page 15: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/15.jpg)
Bordi arrotondati
#radius2 {
/*vertical radius*/
borderradius: 12px/24px;
border: 10px solid red;
backgroundcolor:red;
}
#radius3 {
/*horizontal radius*/
borderradius: 24px/12px;
border: 10px solid red;
backgroundcolor:red;
}
#radius4 {
/*top left, top right, bottom right, bottom left*/
borderradius: 40px 50% 10px 20%;
border: 10px solid red;
backgroundcolor:red;
}
![Page 16: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/16.jpg)
![Page 17: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/17.jpg)
● border-top-left-radius● border-top-right-radius● border-bottom-right-radius● border-bottom-left-radius● border-radius
Supporto senza i prefissi proprietari
![Page 18: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/18.jpg)
Box-shadow
#shadow1 {
boxshadow: 5px 5px 10px 2px blue;
}
#shadow2 { boxshadow: 5px 5px 10px 2px red;
}
![Page 19: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/19.jpg)
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
![Page 20: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/20.jpg)
inset
#shadow3 {
boxshadow: 5px 5px 10px 2px orange inset;
}
![Page 21: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/21.jpg)
![Page 22: HTML5 e Css3 - 3 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022051817/5479d986b37959a22b8b47ca/html5/thumbnails/22.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: