#5 - CSS3 Gradients and Backgrounds
4 likes1,581 views
The document discusses techniques for digital animation. It covers CSS3 backgrounds such as background-color, background-image, background-repeat, background-attachment, and background-position. It then discusses new CSS3 properties like background-origin, background-clip, and background-size. It also covers CSS3 gradients like linear-gradient and radial-gradient. The document provides examples and links to online code samples demonstrating each technique.
![background-repeat
[CSS2.1] [CSS3]
● repeat ● repeat repeat
● repeat-x ● space
● repeat-y ● round
● no-repeat
9 Basic / CSS3 backgrounds](https://image.slidesharecdn.com/20121219-basic5-130110024514-phpapp02/85/5-CSS3-Gradients-and-Backgrounds-9-320.jpg)
![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](https://image.slidesharecdn.com/20121219-basic5-130110024514-phpapp02/85/5-CSS3-Gradients-and-Backgrounds-11-320.jpg)
![Multiple backgrounds
background-image:<bg-image> [, <bg-image>]*
http://jsfiddle.net/MicheleBertoli/UFWKJ
15 Basic / CSS3 backgrounds](https://image.slidesharecdn.com/20121219-basic5-130110024514-phpapp02/85/5-CSS3-Gradients-and-Backgrounds-15-320.jpg)
#5 - CSS3 Gradients and Backgrounds
- 2. Tecniche di animazione digitale 1 Michele Bertoli Founder / Lead Software Engineer at Igloo igloolab.com [email protected]
- 3. Basic 5 December 19, 2012
- 4. Agenda CSS3 backgrounds 5 17 CSS3 gradients 21 Let's do it
- 6. CSS2.1 ● background-color ● background-image ● background-repeat ● background-attachment ● background-position 6 Basic / CSS3 backgrounds
- 7. background-color background-color:#000; http://jsfiddle.net/MicheleBertoli/MzR5z 7 Basic / CSS3 backgrounds
- 8. background-image background-image:url(...); http://jsfiddle.net/MicheleBertoli/MzR5z/1 8 Basic / CSS3 backgrounds
- 9. background-repeat [CSS2.1] [CSS3] ● repeat ● repeat repeat ● repeat-x ● space ● repeat-y ● round ● no-repeat 9 Basic / CSS3 backgrounds
- 10. background-attachment ● scroll ● fixed http://jsfiddle.net/MicheleBertoli/zSs6V http://jsfiddle.net/MicheleBertoli/zSs6V/1 10 Basic / CSS3 backgrounds
- 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. CSS3 ● background-origin ● background-clip ● background-size 12 Basic / CSS3 backgrounds
- 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. background-size ● width height ● contain ● cover http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size 14 Basic / CSS3 backgrounds
- 15. Multiple backgrounds background-image:<bg-image> [, <bg-image>]* http://jsfiddle.net/MicheleBertoli/UFWKJ 15 Basic / CSS3 backgrounds
- 16. Shorthand properties background: color position size repeat origin clip attachment image; 16 Basic / CSS3 backgrounds
- 17. CSS3 gradients
- 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. CSS3 Patterns Gallery http://lea.verou.me/css3patterns 19 Basic / CSS3 Gradients
- 20. Coffee Break
- 21. Let's do it
- 22. Let's 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 / Let's do it
- 23. Thank you