Your SlideShare is downloading. ×
0
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
#5 - CSS3 Gradients and Backgrounds
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

#5 - CSS3 Gradients and Backgrounds

1,048

Published on

- CSS3 backgrounds …

- 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,048
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tecniche di animazionedigitale 1
  • 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  • 3. Basic 5December 19, 2012
  • 4. AgendaCSS3 backgrounds 5 17CSS3 gradients 21Lets 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. Lets do it
  • 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. Thank you

×