html5 e css3 - 4 | webmaster & webdesigner

of 21 /21
HTML5 e Css3 [4] Matteo Magni

Author: matteo-magni

Post on 15-Nov-2014

456 views

Category:

Technology


7 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. HTML5 e Css3 [4]Matteo Magni

2. Gestione delle decorazioni 3. text-shadow#shadow1{/*horizontaloffset,verticaloffset,blurradius,shadowcolor*/textshadow:5px5px2pxblue;} No inset value 4. Multiple text-shadow Supporto a ombre multiple#shadow1{textshadow:5px5px2pxblue,5px5px0.3emred;} 5. Text-shadow outline Outline Rudimentale#shadow1{color:white;fontsize:20px;textshadow:0px1px1pxblue,1px0px1pxblue,1px0px1pxblue,0px1px1pxblue,1px1px1pxblue,1px1px1pxblue,1px1px1pxblue,1px1px1pxblue;} 6. text-shadow support 7. Gradienti/*TheOldWay*/#lineargradient{background:#fffurl(lineargradient.png)toprepeatx} 8. #gradient1{/*Oldbrowsers*/background:#1e5799;/*W3C*/background:lineargradient(tobottom,#1e57990%,#7db9e8100%);} 9. Punto di partenza top top left top right bottom bottom left bottom right left right 10. Coloribackground:lineargradient(toright,#3b679e0%,#2b88d950%,#207cca51%,#7db9e8100%); 11. Offeset si definisce pure il valore di offset (0%). pu essere espresso in forma decimale conuna scala che va da 0.0 a 1.0. E il punto in cui il colore deve apparire 12. radial-gradientbackground:radialgradient(ellipseatcenter,#3b679e0%,#7db9e8100%);/*W3C*/Forma del Gradiente: ellipse circle 13. Regole proprietarie#gradient2{background:mozlineargradient(top,#1e57990%,#7db9e8100%);/*FF3.6+*/background:webkitgradient(linear,lefttop,leftbottom,colorstop(0%,#1e5799),colorstop(100%,#7db9e8));/*Chrome,Safari4+*/background:webkitlineargradient(top,#1e57990%,#7db9e8100%);/*Chrome10+,Safari5.1+*/background:olineargradient(top,#1e57990%,#7db9e8100%);/*Opera11.10+*/background:mslineargradient(top,#1e57990%,#7db9e8100%);/*IE10+*/} 14. IE Hackfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1e5799,endColorstr=#7db9e8,GradientType=0);/*IE69*/ 15. http://www.colorzilla.com/gradient-editor/ 16. Background multipi#multiple{backgroundimage:url(github.png),url(betweengrassandsky.png);backgroundposition:centerbottom,lefttop;backgroundrepeat:norepeat;} 17. border-image#border{width:200px;padding:10px;border:27pxsolidblack;webkitborderimage:url(border.png)27272727roundround;mozborderimage:url(border.png)27272727roundround;borderimage:url(border.png)27272727roundround;} 18. border-image border-top-image border-right-image border-bottom-image border-left-image 19. Round Stretch#border2{width:200px;padding:10px;border:27pxsolidblack;borderimage:url(border2.png)27272727stretchstretch;} 20. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:[email protected]