SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
HTML5 e Css3 [1]
Matteo Magni
Quale sono i problemi principali che incontrate
         quando scrivete i CSS2?
Problemi?
●   Gestione delle decorazioni

●   Disordine nel markup html che ci tocca
    aggiungere

●   Troppo Javascript per la presentazione
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    /*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;
                                       }
Bordi arrotondati
 #radius1 {
/*­webkit­border­radius: 12px;
  ­moz­border­radius: 12px;*/
  border­radius: 12px;
  border: 10px solid red;
  background­color:red;
}  
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;
}
   
●   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

Weitere ähnliche Inhalte

Andere mochten auch

Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesignerHtml e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesignerMatteo Magni
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Matteo Magni
 
Storia ed Architettura di Internet e del web
Storia ed Architettura di Internet e del webStoria ed Architettura di Internet e del web
Storia ed Architettura di Internet e del webvfailla
 
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore RomeoHTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
 
Sviluppare per Microsoft Band
Sviluppare per Microsoft BandSviluppare per Microsoft Band
Sviluppare per Microsoft BandMassimo Bonanni
 
Windows App Studio: da zero allo store in 60 minuti!
Windows App Studio: da zero allo store in 60 minuti!Windows App Studio: da zero allo store in 60 minuti!
Windows App Studio: da zero allo store in 60 minuti!Massimo Bonanni
 
Initializr - come iniziare
Initializr - come iniziareInitializr - come iniziare
Initializr - come iniziareSalvatore Paone
 
Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
 
MJTobin Resume 2015
MJTobin Resume 2015MJTobin Resume 2015
MJTobin Resume 2015Maryjo Tobin
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
Applicazioni Windows Store con Kinect 2
Applicazioni Windows Store con Kinect 2 Applicazioni Windows Store con Kinect 2
Applicazioni Windows Store con Kinect 2 Massimo Bonanni
 
Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!
Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!
Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!Massimo Bonanni
 
HTMLslide html
HTMLslide htmlHTMLslide html
HTMLslide htmlritalerede
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerMatteo Magni
 

Andere mochten auch (19)

Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesignerHtml e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Storia ed Architettura di Internet e del web
Storia ed Architettura di Internet e del webStoria ed Architettura di Internet e del web
Storia ed Architettura di Internet e del web
 
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore RomeoHTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
 
Domino e HTML5, #dd13
Domino e HTML5, #dd13Domino e HTML5, #dd13
Domino e HTML5, #dd13
 
Sviluppare per Microsoft Band
Sviluppare per Microsoft BandSviluppare per Microsoft Band
Sviluppare per Microsoft Band
 
HTMLslide
HTMLslide HTMLslide
HTMLslide
 
Windows App Studio: da zero allo store in 60 minuti!
Windows App Studio: da zero allo store in 60 minuti!Windows App Studio: da zero allo store in 60 minuti!
Windows App Studio: da zero allo store in 60 minuti!
 
Initializr - come iniziare
Initializr - come iniziareInitializr - come iniziare
Initializr - come iniziare
 
HTML 5 e browser legacy
HTML 5 e browser legacyHTML 5 e browser legacy
HTML 5 e browser legacy
 
Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5
 
MJTobin Resume 2015
MJTobin Resume 2015MJTobin Resume 2015
MJTobin Resume 2015
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
Applicazioni Windows Store con Kinect 2
Applicazioni Windows Store con Kinect 2 Applicazioni Windows Store con Kinect 2
Applicazioni Windows Store con Kinect 2
 
Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!
Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!
Windows Hello e Intel(r) RealSense(tm): attenti a questi due!!
 
HTMLslide html
HTMLslide htmlHTMLslide html
HTMLslide html
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
 
Html5
Html5Html5
Html5
 
HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesignerHTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 - 2 | WebMaster & WebDesigner
 

Ähnlich wie HTML5 e Css3 - 3 | WebMaster & WebDesigner

Ähnlich wie HTML5 e Css3 - 3 | WebMaster & WebDesigner (13)

HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesigner
 
Stilefoglio1
Stilefoglio1Stilefoglio1
Stilefoglio1
 
Nostilefoglio
NostilefoglioNostilefoglio
Nostilefoglio
 
Breaking Blank
Breaking BlankBreaking Blank
Breaking Blank
 
Sass, Less and Compass
Sass, Less and CompassSass, Less and Compass
Sass, Less and Compass
 
Stilefoglio2
Stilefoglio2Stilefoglio2
Stilefoglio2
 
Stilefoglio3
Stilefoglio3Stilefoglio3
Stilefoglio3
 
Quella sporca dozzina (a cascata) la vendetta
Quella sporca dozzina (a cascata) la vendettaQuella sporca dozzina (a cascata) la vendetta
Quella sporca dozzina (a cascata) la vendetta
 
Gestire i pdf con iOS
Gestire i pdf con iOSGestire i pdf con iOS
Gestire i pdf con iOS
 
Javascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesignerJavascript - 5 | WebMaster & WebDesigner
Javascript - 5 | WebMaster & WebDesigner
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Lezione 3
Lezione 3Lezione 3
Lezione 3
 
Coding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il cssCoding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il css
 

Mehr von Matteo Magni

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con AnsibleMatteo Magni
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner Matteo Magni
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerMatteo Magni
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerJavascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerJavascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerJavascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerMatteo Magni
 
Web Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerWeb Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerSeo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerMatteo Magni
 
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 Seo e Web Marketing - 4 | WebMaster & WebDesigner Seo e Web Marketing - 4 | WebMaster & WebDesigner
Seo e Web Marketing - 4 | WebMaster & WebDesignerMatteo Magni
 

Mehr von Matteo Magni (20)

Introduzione DevOps con Ansible
Introduzione DevOps con AnsibleIntroduzione DevOps con Ansible
Introduzione DevOps con Ansible
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
 
HTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesignerHTML5 e Css3 - 6 | WebMaster & WebDesigner
HTML5 e Css3 - 6 | WebMaster & WebDesigner
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
jQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesignerjQuery - 5 | WebMaster & WebDesigner
jQuery - 5 | WebMaster & WebDesigner
 
jQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesignerjQuery - 4 | WebMaster & WebDesigner
jQuery - 4 | WebMaster & WebDesigner
 
jQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesignerjQuery - 3 | WebMaster & WebDesigner
jQuery - 3 | WebMaster & WebDesigner
 
jQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesignerjQuery - 2 | WebMaster & WebDesigner
jQuery - 2 | WebMaster & WebDesigner
 
jQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesignerjQuery - 1 | WebMaster & WebDesigner
jQuery - 1 | WebMaster & WebDesigner
 
Javascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesignerJavascript - 7 | WebMaster & WebDesigner
Javascript - 7 | WebMaster & WebDesigner
 
Javascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesignerJavascript - 6 | WebMaster & WebDesigner
Javascript - 6 | WebMaster & WebDesigner
 
Javascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesignerJavascript - 4 | WebMaster & WebDesigner
Javascript - 4 | WebMaster & WebDesigner
 
Javascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesignerJavascript - 3 | WebMaster & WebDesigner
Javascript - 3 | WebMaster & WebDesigner
 
Javascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesignerJavascript - 2 | WebMaster & WebDesigner
Javascript - 2 | WebMaster & WebDesigner
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesigner
 
Web Usability - 3 | WebMaster & WebDesigner
 Web Usability - 3 | WebMaster & WebDesigner Web Usability - 3 | WebMaster & WebDesigner
Web Usability - 3 | WebMaster & WebDesigner
 
Web Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesignerWeb Usability - 2 | WebMaster & WebDesigner
Web Usability - 2 | WebMaster & WebDesigner
 
Web Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesignerWeb Usability - 1 | WebMaster & WebDesigner
Web Usability - 1 | WebMaster & WebDesigner
 
Seo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesignerSeo e Web Marketing - 5 | WebMaster & WebDesigner
Seo e Web Marketing - 5 | WebMaster & WebDesigner
 
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 Seo e Web Marketing - 4 | WebMaster & WebDesigner Seo e Web Marketing - 4 | WebMaster & WebDesigner
Seo e Web Marketing - 4 | WebMaster & WebDesigner
 

HTML5 e Css3 - 3 | WebMaster & WebDesigner