Tecniche di animazionedigitale 1
Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accade...
Basic 5December 19, 2012
AgendaCSS3 backgrounds   5                   17CSS3 gradients                   21Lets do it
CSS3 backgrounds
CSS2.1●   background-color●   background-image●   background-repeat●   background-attachment●   background-position       ...
background-color  background-color:#000; http://jsfiddle.net/MicheleBertoli/MzR5z                           7   Basic / CS...
background-image background-image:url(...); http://jsfiddle.net/MicheleBertoli/MzR5z/1                              8   Ba...
background-repeat[CSS2.1]            [CSS3]● repeat            ● repeat repeat● repeat-x          ● space● repeat-y       ...
background-attachment● scroll● fixed  http://jsfiddle.net/MicheleBertoli/zSs6V  http://jsfiddle.net/MicheleBertoli/zSs6V/1...
background-position[CSS2.1] background-position: x y   background-position:10px 10px;[CSS3] background-position: x x y y  ...
CSS3● background-origin● background-clip● background-size                      12   Basic / CSS3 backgrounds
background-origin/background-clip● content-box● padding-box● border-box  http://www.w3schools.com/cssref/playit.asp?filena...
background-size● width height● contain● cover  http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size...
Multiple backgrounds  background-image:<bg-image> [, <bg-image>]* http://jsfiddle.net/MicheleBertoli/UFWKJ                ...
Shorthand properties  background: color position size repeat origin clip attachment image;                                ...
CSS3 gradients
Gradient properties● linear-gradient  http://jsfiddle.net/MicheleBertoli/AwxJG● repeat-linear-gradient  http://jsfiddle.ne...
CSS3 Patterns Gallery http://lea.verou.me/css3patterns                       19   Basic / CSS3 Gradients
Coffee Break
Lets do it
Lets do it              Menu item 1 / Menu item 2 / Menu item 3              Title               Lorem ipsum dolor sit ame...
Thank you
Upcoming SlideShare
Loading in …5
×

#5 - CSS3 Gradients and Backgrounds

1,350 views
1,253 views

Published on

- CSS3 backgrounds
- CSS3 gradients
- Let's do it

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

No Downloads
Views
Total views
1,350
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

#5 - CSS3 Gradients and Backgrounds

  1. 1. Tecniche di animazionedigitale 1
  2. 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  3. 3. Basic 5December 19, 2012
  4. 4. AgendaCSS3 backgrounds 5 17CSS3 gradients 21Lets do it
  5. 5. CSS3 backgrounds
  6. 6. CSS2.1● background-color● background-image● background-repeat● background-attachment● background-position 6 Basic / CSS3 backgrounds
  7. 7. background-color background-color:#000; http://jsfiddle.net/MicheleBertoli/MzR5z 7 Basic / CSS3 backgrounds
  8. 8. background-image background-image:url(...); http://jsfiddle.net/MicheleBertoli/MzR5z/1 8 Basic / CSS3 backgrounds
  9. 9. background-repeat[CSS2.1] [CSS3]● repeat ● repeat repeat● repeat-x ● space● repeat-y ● round● no-repeat 9 Basic / CSS3 backgrounds
  10. 10. background-attachment● scroll● fixed http://jsfiddle.net/MicheleBertoli/zSs6V http://jsfiddle.net/MicheleBertoli/zSs6V/1 10 Basic / CSS3 backgrounds
  11. 11. background-position[CSS2.1] background-position: x y background-position:10px 10px;[CSS3] background-position: x x y y background-position:left 10px top 10px; http://jsfiddle.net/MicheleBertoli/uwyQU/2 11 Basic / CSS3 backgrounds
  12. 12. CSS3● background-origin● background-clip● background-size 12 Basic / CSS3 backgrounds
  13. 13. background-origin/background-clip● content-box● padding-box● border-box http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin 13 Basic / CSS3 backgrounds
  14. 14. background-size● width height● contain● cover http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size 14 Basic / CSS3 backgrounds
  15. 15. Multiple backgrounds background-image:<bg-image> [, <bg-image>]* http://jsfiddle.net/MicheleBertoli/UFWKJ 15 Basic / CSS3 backgrounds
  16. 16. Shorthand properties background: color position size repeat origin clip attachment image; 16 Basic / CSS3 backgrounds
  17. 17. CSS3 gradients
  18. 18. Gradient properties● linear-gradient http://jsfiddle.net/MicheleBertoli/AwxJG● repeat-linear-gradient http://jsfiddle.net/MicheleBertoli/AwxJG/1● radial-gradient http://jsfiddle.net/MicheleBertoli/HWQKG● repeat-radial-gradient http://jsfiddle.net/MicheleBertoli/HWQKG/1 18 Basic / CSS3 Gradients
  19. 19. CSS3 Patterns Gallery http://lea.verou.me/css3patterns 19 Basic / CSS3 Gradients
  20. 20. Coffee Break
  21. 21. Lets do it
  22. 22. Lets do it Menu item 1 / Menu item 2 / Menu item 3 Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor, odio eget sollicitudin pharetra, augue dui porta felis, ac laoreet arcu velit et massa. Nullam a sapien augue, eget sodales nibh. Donec ut erat lorem. Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor, odio eget sollicitudin pharetra, augue dui porta felis, ac laoreet arcu velit et massa. 22 Basic / Lets do it
  23. 23. Thank you

×