Quarta lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

1. HTML5 e Css3 [4]
Matteo Magni

2. Gestione delle decorazioni

3. text-shadow
#shadow1 {
/* horizontal offset,
vertical offset,
blur­radius,
shadow color*/
text­shadow: 5px 5px 2px blue;
}
● No inset value

4. Multiple text-shadow
● Supporto a ombre multiple
#shadow1 {
text­shadow: 5px 5px 2px blue,
­5px 5px 0.3em red;
}

5. 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;
}

6. text-shadow support

7. Gradienti
/*The Old Way*/
#linear­gradient {
background: #fff url(linear­
gradient.png) top repeat­x
}

9. #gradient1 {
/* Old browsers */
background: #1e5799;
/* W3C */
background: linear­gradient(to
bottom, #1e5799 0%,#7db9e8 100%);
}

10. Punto di partenza
● top
● top left
● top right
● bottom
● bottom left
● bottom right
● left
● right

11. Colori
background: linear­gradient(to right,
#3b679e 0%,
#2b88d9 50%,
#207cca 51%,
#7db9e8 100%);

12. 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

13. radial-gradient
background: radial­gradient(ellipse
at center, #3b679e 0%,#7db9e8
100%); /* W3C */
Forma del Gradiente:
● ellipse
● circle

14. 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+ */
}

15. IE Hack
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 );
/* IE6­9 */

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

17. Background multipi
#multiple {
background­image:
url(github.png),
url(betweengrassandsky.png);
background­position: center bottom, left
top;
background­repeat: no­repeat;
}

18. 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;
}

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

20. Round Stretch
#border2 {
width: 200px;
padding: 10px;
border: 27px solid black;
border­image:
url(border2.png)
27 27 27 27
stretch
stretch;
}

21. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me