#5 - CSS3 Gradients and Backgrounds

#5 - CSS3 Gradients and Backgrounds

• 1.
  Tecniche di animazione digitale1
• 2.
  Tecniche di animazione digitale1 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: xy 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