#5 - css3 gradients and backgrounds
DESCRIPTION
- CSS3 backgrounds - CSS3 gradients - Let's do itTRANSCRIPT
Tecniche di animazionedigitale 1
Michele BertoliFounder / Lead Software Engineer at Igloo
Tecniche di animazionedigitale 1
Basic 5December 19, 2012
Agenda
CSS3 backgrounds
CSS3 gradients
Let's do it
5
17
21
CSS3 backgrounds
CSS2.1
● background-color● background-image● background-repeat● background-attachment● background-position
6 Basic / CSS3 backgrounds
background-color
7 Basic / CSS3 backgrounds
background-color:#000;
http://jsfiddle.net/MicheleBertoli/MzR5z
background-image
8 Basic / CSS3 backgrounds
background-image:url(...);
http://jsfiddle.net/MicheleBertoli/MzR5z/1
background-repeat
[CSS2.1]● repeat● repeat-x● repeat-y● no-repeat
9 Basic / CSS3 backgrounds
[CSS3]● repeat repeat● space● round
background-attachment
● scroll● fixed
10 Basic / CSS3 backgrounds
http://jsfiddle.net/MicheleBertoli/zSs6V
http://jsfiddle.net/MicheleBertoli/zSs6V/1
background-position
[CSS2.1] background-position: x y
[CSS3] background-position: x x y y
11 Basic / CSS3 backgrounds
background-position:10px 10px;
background-position:left 10px top 10px;
http://jsfiddle.net/MicheleBertoli/uwyQU/2
CSS3
● background-origin● background-clip● background-size
12 Basic / CSS3 backgrounds
background-origin/background-clip
● content-box● padding-box● border-box
13 Basic / CSS3 backgrounds
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin
background-size
● width height● contain● cover
14 Basic / CSS3 backgrounds
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
Multiple backgrounds
15 Basic / CSS3 backgrounds
background-image:<bg-image> [, <bg-image>]*
http://jsfiddle.net/MicheleBertoli/UFWKJ
Shorthand properties
16 Basic / CSS3 backgrounds
background: color position size repeat origin clip attachment image;
CSS3 gradients
Gradient properties
● linear-gradient
● repeat-linear-gradient
● radial-gradient
● repeat-radial-gradient
18 Basic / CSS3 Gradients
http://jsfiddle.net/MicheleBertoli/AwxJG
http://jsfiddle.net/MicheleBertoli/AwxJG/1
http://jsfiddle.net/MicheleBertoli/HWQKG
http://jsfiddle.net/MicheleBertoli/HWQKG/1
CSS3 Patterns Gallery
19 Basic / CSS3 Gradients
http://lea.verou.me/css3patterns
Coffee Break
Let's do it
Let's do it
22 Basic / 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.
Thank you