html5 e css3 - 4 | webmaster & webdesigner
DESCRIPTION
Quarta lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesignerTRANSCRIPT
HTML5 e Css3 [4]Matteo Magni
Gestione delle decorazioni
text-shadow #shadow1 {
/* horizontal offset,
vertical offset,
blurradius,
shadow color*/
textshadow: 5px 5px 2px blue;
}
● No inset value
Multiple text-shadow
● Supporto a ombre multiple
#shadow1 {
textshadow: 5px 5px 2px blue,
5px 5px 0.3em red;
}
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;
}
text-shadow support
Gradienti
/*The Old Way*/
#lineargradient {
background: #fff url(lineargradient.png) top repeatx
}
#gradient1 {
/* Old browsers */
background: #1e5799;
/* W3C */
background: lineargradient(to bottom, #1e5799 0%,#7db9e8 100%);
}
Punto di partenza
● top● top left● top right● bottom● bottom left● bottom right● left● right
Colori
background: lineargradient(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: radialgradient(ellipse at center, #3b679e 0%,#7db9e8 100%); /* W3C */
Forma del Gradiente:● ellipse● circle
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+ */
}
IE Hack
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
/* IE69 */
http://www.colorzilla.com/gradient-editor/
Background multipi#multiple {
backgroundimage:
url(github.png),
url(betweengrassandsky.png);
backgroundposition: center bottom, left top;
backgroundrepeat: norepeat;
}
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;
}
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;
borderimage:
url(border2.png)
27 27 27 27
stretch
stretch;
}
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: