Your SlideShare is downloading. ×
HTML5 e Css3 - 4 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML5 e Css3 - 4 | WebMaster & WebDesigner

390
views

Published on

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

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
390
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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