html5 e css3 - 4 | webmaster & webdesigner

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

Post on 01-Nov-2014

604 views

Category:

Technology

7 download

Embed Size (px)

DESCRIPTION

Quarta lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. HTML5 e Css3 [4]Matteo Magni
  • 2. Gestione delle decorazioni
  • 3. text-shadow#shadow1{ No inset value/*horizontaloffset,verticaloffset,blurradius,shadowcolor*/textshadow:5px5px2pxblue;}
  • 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 con una 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://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: [email protected]