Your SlideShare is downloading. ×
0
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
Mastering CSS3 gradients
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

Mastering CSS3 gradients

52,342

Published on

Screenshots from my talk "Mastering CSS3 Gradients". The HTML version of the slides with editable live demos is available at http://leaverou.me/css3-gradients/

Screenshots from my talk "Mastering CSS3 Gradients". The HTML version of the slides with editable live demos is available at http://leaverou.me/css3-gradients/

Published in: Technology
4 Comments
83 Likes
Statistics
Notes
  • Nice tutorial, a roundup of CSS3 gradients can be found on this dedicated mini site. Also covers the important fallback background-image for less up-to-date browsers. http://www.css3gradients.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Example in 110 slide doesnot work for me.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can't, at least not in a sane way.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Lea,
    Making corner tricks at slide 74, how can I resolve that using -webkit-gradient(linear... ?

    I had a serious problem using that below:

    background:-moz-linear-gradient(45deg,transparent 0px, #d21a21 0) bottom left,-moz-linear-gradient(135deg,transparent 0px, #d21a21 0) bottom right,-moz-linear-gradient(232deg, transparent 9px, #da3e31 0) top right,-moz-linear-gradient(315deg,transparent 0px, #da3e31 0) top left;
    background:-webkit-gradient(linear, center top,center bottom, color-stop(0.5,transparent), color-stop(0.5,#d21a21)),-webkit-gradient(linear, right 0, 110 80, color-stop(0.1,transparent), color-stop(0.1,#da3e31));
    background:-webkit-linear-gradient(45deg,transparent 0px, #d21a21 0) bottom left,-webkit-linear-gradient(135deg,transparent 0px, #d21a21 0) bottom right,-webkit-linear-gradient(232deg, transparent 9px, #da3e31 0) top right,-webkit-linear-gradient(315deg,transparent 0px, #da3e31 0) top left;
    background:-o-linear-gradient(45deg,transparent 0px, #d21a21 0) bottom left,-o-linear-gradient(135deg,transparent 0px, #d21a21 0) bottom right,-o-linear-gradient(232deg, transparent 9px, #da3e31 0) top right,-o-linear-gradient(315deg,transparent 0px, #da3e31 0) top left;
    background:-ms-linear-gradient(45deg,transparent 0px, #d21a21 0) bottom left,-ms-linear-gradient(135deg,transparent 0px, #d21a21 0) bottom right,-ms-linear-gradient(232deg, transparent 9px, #da3e31 0) top right,-ms-linear-gradient(315deg,transparent 0px, #da3e31 0) top left;
    background:linear-gradient(45deg,transparent 0px, #d21a21 0) bottom left,linear-gradient(135deg,transparent 0px, #d21a21 0) bottom right,linear-gradient(232deg, transparent 9px, #da3e31 0) top right,linear-gradient(315deg,transparent 0px, #da3e31 0) top left;
    border-radius:5px;
    -moz-border-radius:5px;
    background-size:50%;
    -moz-background-size: 50%;
    background-repeat:no-repeat;
    }

    background-size:50% break my background:-webkit-gradient(linear, center...

    did you have any a idea?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
52,342
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
1,677
Comments
4
Likes
83
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

×