Addition of radial gradients?

[bfintal]

Might be a good idea to add radial gradients to the current collection. No current support for Opera, FF < 3.6 and IE < 10 but how about just adding a fallback to linear gradients?

References:

• collection of cross-browser linear and radial gradient examples: http://css-tricks.com/examples/CSS3Gradient/
• -webkit- gradients: http://www.webkit.org/blog/1424/css3-gradients/
• -mozilla- gradients: https://developer.mozilla.org/en/CSS/-moz-radial-gradient
• -ms- radial gradient: http://msdn.microsoft.com/en-us/library/windows/apps/hh453718(v=vs.85).aspx

[paulirish]

i'd be happy to see radial in here.. if you or anyone file a pull request we can work with that

[bfintal]

I'll be on this right after I finish my current project!

[niftylettuce]

we need to add this in bros

[paulirish]

patches welcome. :)

[enriquemorenotent]

Very much needed!!!!

[niftylettuce]

example less mixin:

.radial(@innerColor: #555, @outerColor: #333)  {
    background-color: @outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
}

[niftylettuce]

then for IE you use a div:

#ie-radial {
  position: absolute;
  background: #fff; /* color you want for gradient */
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2);
}