radial-gradient-function.html

<section id="radial-gradient-function">
  <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_radial-gradient.scss">View source</a></h2>
  <p>Outputs a radial-gradient. Use in conjunction with the <a href="#background-image">background-image mixin.</a> The function takes the same arguments as the <a href="#radial-gradient">radial-gradient mixin</a>.</p>

{% highlight scss %}
@include backgorund-image( radial-gradient(#1e5799, #3dc3d1) );
@include background-image( radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1) );
@include background-image( radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef) );
{% endhighlight %}

<br>
<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
<br>
<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>

{% highlight scss %}
@include radial-gradient(#1e5799, #3dc3d1,
                         $deprecated-pos1: left center, $deprecated-pos2: left top,
                         $deprecated-radius1: 50, $deprecated-radius2: 360);
{% endhighlight %}
  <h3>Demo</h3>
  <section class="demo">
  </section>
</section>