@mixin vertical-gradient($fc, $sc, $h:60, $fcp:000, $scp:f00){ background: $sc url('gradient.php?w=10&h=#{$h}&d=vertical&fc=#{$fcp}&ec=#{$scp}') top left repeat-x; /* old browsers */ background: -moz-linear-gradient(top, $fc 0%, $sc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$fc), color-stop(100%,$sc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, $fc 0%,$sc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, $fc 0%,$sc 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, $fc 0%,$sc 100%); /* IE10+ */ background: linear-gradient(top, $fc 0%,$sc 100%); /* W3C */ } @mixin horizontal-gradient($fc, $sc, $w:60, $fcp:000, $scp:f00){ background: $sc url('gradient.php?w=#{$w}&h=10&d=horizontal&fc=#{$fcp}&ec=#{$scp}') top left repeat-y; /* old browsers */ background: -moz-linear-gradient(left, $fc 0%, $sc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,$fc), color-stop(100%,$sc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, $fc 0%,$sc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, $fc 0%,$sc 100%); /* Opera11.10+ */ background: -ms-linear-gradient(left, $fc 0%,$sc 100%); /* IE10+ */ background: linear-gradient(left, $fc 0%,$sc 100%); /* W3C */ }