html5 e css3 - 3 | webmaster & webdesigner

of 22/22
HTML5 e Css3 [1] Matteo Magni

Post on 15-Nov-2014

647 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Terza lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 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 toccaaggiungere Troppo Javascript per la presentazione 4. 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 paginasenza di esse 5. Opacitydiv{color:#00c;opacity:1.0;}!div{color:#00c;opacity:0.5;}! 6. HSLa Tonalit (Hue) Saturazione (Saturation) Luminosit (Lightness) Trasparenza (alpha)In aggiunta al RGBa ma forse pi chiaro 7. 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:20pxsolidrgba(0,0,0,.3);} 8. background-clip#alpha{color:rgba(255,255,255,.8);backgroundcolor:hsla(200,100%,50%,.5);border:20pxsolidrgba(0,0,0,.3);backgroundclip:paddingbox;} 9. background-clip border-box lo sfondo si estende fino allarea delbordo padding-box si estende nellarea del padding content-box solo nellarea del contenuto 10. Bordi arrotondati History//unavoltaciservivano4immagini /*csscheusa4immaginideglipiunhtmldiquestotipo angolitondi*/

#contentBottom{
background:url("corner_bottom_l

Loremipsumdoloretc

eft.gif")bottomleftno
repeat;
backgroundcolor:#dadada; ....
#innerBottom{