• Email
  • Favorite
  • Download
  • Embed
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Mastering CSS3 gradients

by Lea Verou on May 27, 2011

  • 15,409 views

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/

Accessibility

Categories

Tags

web design color css3 css3 gradients css gradients web lea verou design gradient

More...

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

26 Embeds 2,192

http://www.webdirections.org 905
http://feeds2.feedburner.com 485
http://neoandrej.blogspot.com 238
http://lanyrd.com 202
http://leaverou.me 153
http://lea.verou.me 58
http://feeds.feedburner.com 37
http://walllab.com 25
http://barcelonista101.blogspot.com 19
http://localhost 16
http://twitter.com 13
https://twitter.com 11
http://webdirections.org 5
url_unknown 4
http://127.0.0.1 3
http://flavors.me 3
http://blog.pier51.com 3
http://paper.li 3
http://clarinetsandco.com 2
http://translate.googleusercontent.com 1
http://barcelonista101.blogspot.com.es 1
http://www.csus.edu 1
http://www.kouratoras.gr 1
http://a0.twimg.com 1
http://www.neoandrej.blogspot.com 1
http://feedproxy.google.com 1

More...

Statistics

Favorites
47
Downloads
463
Comments
4
Embed Views
2,192
Views on SlideShare
13,217
Total Views
15,409

14 of 4 previous next Post a comment

  • davidprattwebdesigner David Pratt 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 4 months ago Reply
    Are you sure you want to Yes No
  • neoandrej Андрей Зюзиков , CEO at Мастерская фан-страниц Example in 110 slide doesnot work for me. 5 months ago Reply
    Are you sure you want to Yes No
  • LeaVerou Lea Verou , Web designer & developer at Fresset Ltd You can't, at least not in a sane way. 11 months ago Reply
    Are you sure you want to Yes No
  • alexsandro_xpt Alexsandro Pereira , Software Developer at Actcon 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?
    11 months ago Reply
    Are you sure you want to Yes No
Post Comment
Edit your comment Cancel

Mastering CSS3 gradients — Presentation Transcript