Download - HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 [1]Matteo Magni
Quale sono i problemi principali che incontrate quando scrivete i CSS2?
● Gestione delle decorazioni
● Disordine nel markup html che ci tocca aggiungere
● Troppo Javascript per la presentazione
Problemi?
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
Opacity
div { color: #00c; opacity: 1.0; }!
div { color: #00c; opacity: 0.5; }!
HSLa
● Tonalità (Hue) ● Saturazione (Saturation)● Luminosità (Lightness)
● Trasparenza (alpha)
In aggiunta al RGBa ma forse più chiaro
● 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);
}
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;
}
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
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;
}
Bordi arrotondati
#radius1 {
/*webkitborderradius: 12px;
mozborderradius: 12px;*/
borderradius: 12px;
border: 10px solid red;
backgroundcolor:red;
}
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;
}
● border-top-left-radius● border-top-right-radius● border-bottom-right-radius● border-bottom-left-radius● border-radius
Supporto senza i prefissi proprietari
Box-shadow
#shadow1 {
boxshadow: 5px 5px 10px 2px blue;
}
#shadow2 { boxshadow: 5px 5px 10px 2px red;
}
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
inset
#shadow3 {
boxshadow: 5px 5px 10px 2px orange inset;
}
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: