HTML5 e Css3 [4]Matteo Magni

Gestione delle decorazioni

text-shadow #shadow1 {

/* horizontal offset, 

   vertical offset, 

   blur­radius, 

   shadow color*/

   text­shadow: 5px 5px 2px blue;

}   

● No inset value

Multiple text-shadow

● Supporto a ombre multiple

#shadow1 {

  text­shadow: 5px 5px 2px blue,

              ­5px 5px 0.3em  red;

}

   

Text-shadow outline

● Outline Rudimentale

#shadow1 {color:white;font­size:20px;

   text­shadow:0px 1px 1px blue, 1px 0px 1px blue,­1px 0px 1px blue,0px ­1px 1px blue,

               1px 1px 1px blue,

               ­1px 1px 1px blue,

               ­1px ­1px 1px blue,

               ­1px ­1px ­1px blue;

}   

   

text-shadow support

Gradienti

/*The Old Way*/

#linear­gradient {

  background: #fff url(linear­gradient.png) top repeat­x

}

#gradient1 { 

  /* Old browsers */

  background: #1e5799; 

  /* W3C */

  background: linear­gradient(to bottom, #1e5799 0%,#7db9e8 100%); 

}

Punto di partenza

● top● top left● top right● bottom● bottom left● bottom right● left● right

Colori

background: linear­gradient(to right, #3b679e 0%,

#2b88d9 50%,

#207cca 51%,

#7db9e8 100%); 

Offeset

● si definisce pure il valore di offset (0%).● può essere espresso in forma decimale con

una scala che va da 0.0 a 1.0. ● E' il punto in cui il colore deve apparire

radial-gradient

background: radial­gradient(ellipse at center, #3b679e 0%,#7db9e8 100%); /* W3C */

Forma del Gradiente:● ellipse● circle

Regole proprietarie

#gradient2 {

  background: ­moz­linear­gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */

  background: ­webkit­gradient(linear, left top, left bottom, color­stop(0%,#1e5799), color­stop(100%,#7db9e8)); /* Chrome,Safari4+ */

  background: ­webkit­linear­gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */

  background: ­o­linear­gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */

  background: ­ms­linear­gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */

}

IE Hack

filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); 

/* IE6­9 */

http://www.colorzilla.com/gradient-editor/

Background multipi#multiple {

  background­image: 

     url(github.png), 

     url(betweengrassandsky.png);

  background­position: center bottom, left top;

  background­repeat: no­repeat;

}

   

border-image

#border {

 width: 200px;

 padding: 10px;

 border: 27px solid black;

 ­webkit­border­image: url(border.png) 27 27 27 27 round round;

 ­moz­border­image: url(border.png) 27 27 27 27 round round;

 border­image: url(border.png) 27 27 27 27 round round;

}

border-image

● border-top-image● border-right-image● border-bottom-image● border-left-image

Round Stretch

#border2 {

 width: 200px;

 padding: 10px;

 border: 27px solid black;

 border­image: 

url(border2.png) 

27 27 27 27 

stretch 

stretch;

               }   

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me