HTML5 e Css3 - 4 | WebMaster & WebDesigner
-
Upload
matteo-magni -
Category
Technology
-
view
458 -
download
7
description
Transcript of HTML5 e Css3 - 4 | WebMaster & WebDesigner
![Page 1: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/1.jpg)
HTML5 e Css3 [4]Matteo Magni
![Page 2: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/2.jpg)
Gestione delle decorazioni
![Page 3: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/3.jpg)
text-shadow #shadow1 {
/* horizontal offset,
vertical offset,
blurradius,
shadow color*/
textshadow: 5px 5px 2px blue;
}
● No inset value
![Page 4: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/4.jpg)
Multiple text-shadow
● Supporto a ombre multiple
#shadow1 {
textshadow: 5px 5px 2px blue,
5px 5px 0.3em red;
}
![Page 5: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/5.jpg)
Text-shadow outline
● Outline Rudimentale
#shadow1 {color:white;fontsize:20px;
textshadow: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;
}
![Page 6: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/6.jpg)
text-shadow support
![Page 7: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/7.jpg)
Gradienti
/*The Old Way*/
#lineargradient {
background: #fff url(lineargradient.png) top repeatx
}
![Page 8: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/8.jpg)
![Page 9: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/9.jpg)
#gradient1 {
/* Old browsers */
background: #1e5799;
/* W3C */
background: lineargradient(to bottom, #1e5799 0%,#7db9e8 100%);
}
![Page 10: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/10.jpg)
Punto di partenza
● top● top left● top right● bottom● bottom left● bottom right● left● right
![Page 11: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/11.jpg)
Colori
background: lineargradient(to right, #3b679e 0%,
#2b88d9 50%,
#207cca 51%,
#7db9e8 100%);
![Page 12: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/12.jpg)
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
![Page 13: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/13.jpg)
radial-gradient
background: radialgradient(ellipse at center, #3b679e 0%,#7db9e8 100%); /* W3C */
Forma del Gradiente:● ellipse● circle
![Page 14: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/14.jpg)
Regole proprietarie
#gradient2 {
background: mozlineargradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: webkitgradient(linear, left top, left bottom, colorstop(0%,#1e5799), colorstop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: webkitlineargradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: olineargradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: mslineargradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
}
![Page 15: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/15.jpg)
IE Hack
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
/* IE69 */
![Page 17: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/17.jpg)
Background multipi#multiple {
backgroundimage:
url(github.png),
url(betweengrassandsky.png);
backgroundposition: center bottom, left top;
backgroundrepeat: norepeat;
}
![Page 18: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/18.jpg)
border-image
#border {
width: 200px;
padding: 10px;
border: 27px solid black;
webkitborderimage: url(border.png) 27 27 27 27 round round;
mozborderimage: url(border.png) 27 27 27 27 round round;
borderimage: url(border.png) 27 27 27 27 round round;
}
![Page 19: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/19.jpg)
border-image
● border-top-image● border-right-image● border-bottom-image● border-left-image
![Page 20: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/20.jpg)
Round Stretch
#border2 {
width: 200px;
padding: 10px;
border: 27px solid black;
borderimage:
url(border2.png)
27 27 27 27
stretch
stretch;
}
![Page 21: HTML5 e Css3 - 4 | WebMaster & WebDesigner](https://reader034.fdocuments.us/reader034/viewer/2022051609/546716caaf7959c6768b5cf6/html5/thumbnails/21.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: