Mastering CSS3 gradients

70,735 views

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/

Published in: Technology
5 Comments
91 Likes
Statistics
Notes
  • My dear, How are you today? i will like to be your friend My name is Sheikha Ghunaim , am a 43 years old divorcee. Please write to me in my email ( Sheikhaghunaim2@hotmail.com ). im honest and open mind single woman. im going to tell more when i see your response. Regards Sheikha.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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
70,735
On SlideShare
0
From Embeds
0
Number of Embeds
26,837
Actions
Shares
0
Downloads
1,800
Comments
5
Likes
91
Embeds 0
No embeds

No notes for slide

×