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

1. Tecniche di animazione
digitale 1

2. Tecniche di animazione
digitale 1
Michele Bertoli
Founder / Lead Software Engineer at Igloo
igloolab.com
michele.bertoli@accademiasantagiulia.it

3. Basic 5
December 19, 2012

4. Agenda
CSS3 backgrounds 5
17
CSS3 gradients
21
Let's do it

5. CSS3 backgrounds

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