How to create a Sass mixin for this CSS radial gradient?


Tags: html,css,css3,sass,mixins

Problem :

I am using the Ultimate CSS Gradient Generator to create a radial gradient, and it provided the Sass includes, however having trouble completing the background-image mixin

The CSS

background: rgb(220,156,118);
background: -moz-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%, rgba(220,156,118,1) 49%, rgba(214,101,90,1) 92%, rgba(214,101,90,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(220,156,118,1)), color-stop(49%,rgba(220,156,118,1)), color-stop(92%,rgba(214,101,90,1)), color-stop(100%,rgba(214,101,90,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: radial-gradient(ellipse at center,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc9c76', endColorstr='#d6655a',GradientType=1 );

Here is the Sass mixin @includes

background-color: rgb(220,156,118);
@include filter-gradient(#dc9c76, #d6655a, horizontal);
@include background-image(radial-gradient(center, ellipse cover,  rgba(220,156,118,1)     0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%));

I was able to create the mixin for the filter-gradient

@mixin filter-gradient($color1, $color2, $direction){
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=$direction);}

However kinda stuck on creating the mixin for the Radial gradient because of the color-stops

@mixin background-image($gradient($position, $type,  $rgba1, $rgba2, $rgba3, $rgba4){
    background: rgb(220,156,118);
    background: -moz-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(220,156,118,1)), color-stop(49%,rgba(220,156,118,1)), color-stop(92%,rgba(214,101,90,1)), color-stop(100%,rgba(214,101,90,1)));
    background: -webkit-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: -o-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: -ms-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: $gradient(ellipse at center, $rgba1, $rgba2, $rgba3, $rgba4);
};

How would you write those in?



Solution :

you should give a try to Compass which is a great set of usefull mixins (like gradient) applying best practices for cross browser behavior.

radial-gradient($color-stops, $center-position, $image)

Because of webkit's limitations, the radial gradient mixin works best if you use pixel-based color stops.

Examples:

// Defaults to a centered, 100px radius gradient
+radial-gradient(color-stops(#c00, #00c))

// 100px radius gradient in the top left corner
+radial-gradient(color-stops(#c00, #00c), top left)

// Three colors, ending at 50px and passing thru #fff at 25px
+radial-gradient(color-stops(#c00, #fff, #00c 50px))

// A background image on top of a 100px radius gradient; requires an image
// with an alpha-layer.
+radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))

Browsers Supported:

  • Chrome
  • Safari
  • Firefox 3.6 Opera

    CSS Howto..

    How to select inner div in an unordered list

    How to remove hover effect from CSS?

    How to create a completely flexible piano keyboard with HTML and CSS

    Css How to override

    [closed]

    how to bypass style in element that is automatically applied through class?

    How is physical inch related to pixels in css given so many different resolutions?

    How to move an image upwards in html/css

    How to add CSS if element has more than one child?

    How to toggle multiple images in jquery?

    How do I style the asp.net membership control with css?

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    Want to duplicate css styles for an ID based style, how to do this with least duplication?

    how to get text aligned vertically with text in list using css

    How to hover over a div to change just a part of its background?

    Make nav dropdown show above all other divs

    How i can adjust the all elements that web page has?

    how to get value from this html date-ranger?

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    How to make this CSS to be in the middle?

    How to keep an :active css style after clicking a link?

    How to display a button over a picture only when hovering it?

    How to make google maps fit the mobile device screen

    How to use one popup box to display arbitrary number of information respectively?

    How to change css file for this aim?

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    How to get Bootstrap's “hero-unit” to fit across the entirety of top section?

    How can I enlarge a table row when hovering over it? - Variation

    Using CSS, how to modify a child element by its class without impacting another child element with the same class but slightly different parent

    How to set content area div height with dynamic header div

    How to put a diagonal line over a textbox in CSS?