Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Mastering CSS3 gradients

71 908 vues

Publié le

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/

Publié dans : Technologie
  • 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.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 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
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Example in 110 slide doesnot work for me.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • You can't, at least not in a sane way.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 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?
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

×