#5 - CSS3 Gradients and Backgrounds

1,497 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,497
On SlideShare
0
From Embeds
0
Number of Embeds
2
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

×