HTML5 e Css3 [4]Matteo Magni
Gestione delle decorazioni
text-shadow #shadow1 {/* horizontal offset,    vertical offset,    blur­radius,    shadow color*/   text­shadow: 5px 5px 2...
Multiple text-shadow● Supporto a ombre multiple#shadow1 {  text­shadow: 5px 5px 2px blue,              ­5px 5px 0.3em  red...
Text-shadow outline● Outline Rudimentale#shadow1 {color:white;font­size:20px;   text­shadow:0px 1px 1px blue, 1px 0px 1px ...
text-shadow support
Gradienti/*The Old Way*/#linear­gradient {  background: #fff url(linear­gradient.png) top repeat­x}
#gradient1 {   /* Old browsers */  background: #1e5799;   /* W3C */  background: linear­gradient(to bottom, #1e5799 0%,#7d...
Punto di partenza● top● top left● top right● bottom● bottom left● bottom right● left● right
Coloribackground: linear­gradient(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 conuna scala che va da 0.0 a 1...
radial-gradientbackground: radial­gradient(ellipse at center, #3b679e 0%,#7db9e8 100%); /* W3C */Forma del Gradiente:● ell...
Regole proprietarie#gradient2 {  background: ­moz­linear­gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */  background...
IE Hackfilter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#1e5799, endColorstr=#7db9e8,GradientType=0 ); /* ...
http://www.colorzilla.com/gradient-editor/
Background multipi#multiple {  background­image:      url(github.png),      url(betweengrassandsky.png);  background­posit...
border-image#border { width: 200px; padding: 10px; border: 27px solid black; ­webkit­border­image: url(border.png) 27 27 2...
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; border­image: url(border2.png) 27 27 27 27 ...
Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me
HTML5 e Css3 - 4 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

HTML5 e Css3 - 4 | WebMaster & WebDesigner

492

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
492
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 e Css3 - 4 | WebMaster & WebDesigner

  1. 1. HTML5 e Css3 [4]Matteo Magni
  2. 2. Gestione delle decorazioni
  3. 3. text-shadow #shadow1 {/* horizontal offset,    vertical offset,    blur­radius,    shadow color*/   text­shadow: 5px 5px 2px blue;}   ● No inset value
  4. 4. Multiple text-shadow● Supporto a ombre multiple#shadow1 {  text­shadow: 5px 5px 2px blue,              ­5px 5px 0.3em  red;}   
  5. 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. 6. text-shadow support
  7. 7. Gradienti/*The Old Way*/#linear­gradient {  background: #fff url(linear­gradient.png) top repeat­x}
  8. 8. #gradient1 {   /* Old browsers */  background: #1e5799;   /* W3C */  background: linear­gradient(to bottom, #1e5799 0%,#7db9e8 100%); }
  9. 9. Punto di partenza● top● top left● top right● bottom● bottom left● bottom right● left● right
  10. 10. Coloribackground: linear­gradient(to right, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); 
  11. 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. 12. radial-gradientbackground: radial­gradient(ellipse at center, #3b679e 0%,#7db9e8 100%); /* W3C */Forma del Gradiente:● ellipse● circle
  13. 13. 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+ */}
  14. 14. IE Hackfilter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#1e5799, endColorstr=#7db9e8,GradientType=0 ); /* IE6­9 */
  15. 15. http://www.colorzilla.com/gradient-editor/
  16. 16. Background multipi#multiple {  background­image:      url(github.png),      url(betweengrassandsky.png);  background­position: center bottom, left top;  background­repeat: no­repeat;}   
  17. 17. 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;}
  18. 18. border-image● border-top-image● border-right-image● border-bottom-image● border-left-image
  19. 19. Round Stretch#border2 { width: 200px; padding: 10px; border: 27px solid black; border­image: url(border2.png) 27 27 27 27 stretch stretch;               }   
  20. 20. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×