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);

    background­color: hsla(200,100%, 50%, .5);

    border: 20px solid rgba(0,0,0,.3);

 }   

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;

 }   

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">&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;

}

Bordi arrotondati

 #radius1 {

/*­webkit­border­radius: 12px;

  ­moz­border­radius: 12px;*/

  border­radius: 12px;

  border: 10px solid red;

  background­color:red;

}  

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;

}   

● 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 {

box­shadow: 5px 5px 10px 2px blue;

}                

#shadow2 {         box­shadow: 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 {

     box­shadow: 5px 5px 10px 2px orange inset;

}

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me