Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mastering CSS3 gradients

71,680 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
  • 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

×