美しいグラデーションが簡単に利用できる!グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient

垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描くmixinをまとめた「SuperGradient」を紹介します。

↓4色を使った斜めのグラデーション、美しいですね!

サイトのキャプチャ

SuperGradient
SuperGradient -GitHub

SuperGradientではグラデーションのタイプとカラー、そのカラーが始めるポイントを指定するだけで、簡単に美しいグラデーションが描けるSassのmixinがまとめられています。
下記に、そのmixinの使い方とスタイルシートでの記述も添えてみました。

サイトのキャプチャ
Vertical, 2 colors
2色を使った垂直方向のグラデーション

mixinの使い方

@include sgradient(
  $colors: (
    (#31B7D7, 0%),
    (#EDAC7D, 100%)
  )
);

CSS

    background-color: #edac7d;
    background: -webkit-linear-gradient(top, #31b7d7 0%, #edac7d 100%);
    background: -moz-linear-gradient(top, #31b7d7 0%, #edac7d 100%);
    background: -ms-linear-gradient(top, #31b7d7 0%, #edac7d 100%);
    background: -o-linear-gradient(top, #31b7d7 0%, #edac7d 100%);
    background: linear-gradient(to bottom, #31b7d7 0%, #edac7d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#31b7d7', EndColorStr='#edac7d'); }
サイトのキャプチャ
Horizontal, 3 colors
3色を使った水平方向のグラデーション

mixinの使い方

@include sgradient(
  $from: left,
  $colors: (
    (#E47D7D, 0%),
    (#C195D3, 50%),
    (#4FB4E8, 100%)
  )
);

CSS

    background-color: #4fb4e8;
    background: -webkit-linear-gradient(left, #e47d7d 0%, #c195d3 48%, #4fb4e8 100%);
    background: -moz-linear-gradient(left, #e47d7d 0%, #c195d3 48%, #4fb4e8 100%);
    background: -ms-linear-gradient(left, #e47d7d 0%, #c195d3 48%, #4fb4e8 100%);
    background: -o-linear-gradient(left, #e47d7d 0%, #c195d3 48%, #4fb4e8 100%);
    background: linear-gradient(to right, #e47d7d 0%, #c195d3 48%, #4fb4e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#e47d7d', EndColorStr='#4fb4e8'); }
サイトのキャプチャ
Diagonal, 4 colors
4色を使った斜め方向のグラデーション

mixinの使い方

@include sgradient(
  $from: top left,
  $colors: (
    (#B58234, 0%),
    (#D2B545, 50%),
    (#D7C04D, 50.01%),
    (#FFFFFF, 100%)
  )
);

CSS

    background-color: white;
    background: -webkit-linear-gradient(-45deg, #a06813 0%, #d0b342 48%, #d8bd53 48.001%, white 100%);
    background: -moz-linear-gradient(-45deg, #a06813 0%, #d0b342 48%, #d8bd53 48.001%, white 100%);
    background: -ms-linear-gradient(-45deg, #a06813 0%, #d0b342 48%, #d8bd53 48.001%, white 100%);
    background: -o-linear-gradient(-45deg, #a06813 0%, #d0b342 48%, #d8bd53 48.001%, white 100%);
    background: linear-gradient(135deg, #a06813 0%, #d0b342 48%, #d8bd53 48.001%, white 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#a06813', EndColorStr='white'); }
サイトのキャプチャ
Radial, 2 colros
2色を使った放射状のグラデーション

mixinの使い方

@include sgradient(
  $type: radial,
  $colors: (
    (#8ABB5D, 0%),
    (#42736F, 100%)
  )
);

CSS

    background-color: #42736f;
    background: -webkit-radial-gradient(top, ellipse cover, #8abb5d 0%, #42736f 100%);
    background: -moz-radial-gradient(top, ellipse cover, #8abb5d 0%, #42736f 100%);
    background: -ms-radial-gradient(top, ellipse cover, #8abb5d 0%, #42736f 100%);
    background: -o-radial-gradient(top, ellipse cover, #8abb5d 0%, #42736f 100%);
    background: radial-gradient(ellipse at top, #8abb5d 0%, #42736f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#8abb5d', EndColorStr='#42736f'); }
サイトのキャプチャ
Radial, 3 colros
3色を使った放射状のグラデーション

mixinの使い方

@include sgradient(
$type: radial,
  $from: top right,
  $colors: (
    (#C5492C, 0%),
    (#EAA14E, 50%),
    (#F0EB7F, 100%)
  )
);

CSS

    background-color: #f0eb7f;
    background: -webkit-radial-gradient(top right, ellipse cover, #c5492c 0%, #eaa14e 48%, #f0eb7f 100%);
    background: -moz-radial-gradient(top right, ellipse cover, #c5492c 0%, #eaa14e 48%, #f0eb7f 100%);
    background: -ms-radial-gradient(top right, ellipse cover, #c5492c 0%, #eaa14e 48%, #f0eb7f 100%);
    background: -o-radial-gradient(top right, ellipse cover, #c5492c 0%, #eaa14e 48%, #f0eb7f 100%);
    background: radial-gradient(ellipse at top right, #c5492c 0%, #eaa14e 48%, #f0eb7f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#c5492c', EndColorStr='#f0eb7f'); }

全てのグラデーションのmixinは、下記のようになります。

SuperGradient -mixin


@function contains($colors,$var) {
$contains: false;
@each $item in $colors { @if $item == $var { $contains: true; } }
@return $contains;
}
@function orientation-string($type, $from, $w3c:false) {
$string: '';
@if $w3c {
@if $type == 'linear' {
@if $from == 'top' or $from == 'bottom' { $string: 'to bottom, '; }
@else if $from == 'left' or $from == 'right' { $string: 'to right, '; }
@else if $from == (left top) or $from == (top left) or $from == (right bottom) or $from == (bottom right) { $string: '135deg, '; }
@else { $string: '45deg, '; }
} @else if $type == 'radial' { $string: 'ellipse at ' + $from + ', '; }
} @else { // new webkit, moz, ms, o
@if $type == 'linear' {
@if $from == 'top' or $from == 'bottom' { $string: 'top, '; }
@else if $from == 'left' or $from == 'right' { $string: 'left, '; }
@else if $from == (left top) or $from == (top left) or $from == (right bottom) or $from == (bottom right) { $string: '-45deg, '; }
@else { $string: '45deg, '; }
} @else if $type == 'radial' { $string: $from + ', ellipse cover, '; }
}
@return $string;
}
@function color-substring($colors) {
$i: 1;
$substring: '';
$string: '';
@while $i < length($colors) { $substring: nth($colors, $i) + ' ' + nth($colors, $i+1); $string: $string + $substring; $i: $i + 1; } @return $string; } @function color-string($colors) { $i: 1; $spacer: ', '; $substring: ''; $string: ''; @while $i <= length($colors) { @if $i == length($colors) { $spacer: ''; } $substring: color-substring(nth($colors, $i)) + $spacer; $string: $string + $substring; $i: $i + 1; } @return $string; } @function ie-gradient-type($direction) { @if $first-color { @return nth(nth($colors, 1), 1) } @else { @return nth(nth($colors, length($colors)), 1) } } @function ie-colors($colors, $first-color:true) { @if $first-color { @return nth(nth($colors, 1), 1) } @else { @return nth(nth($colors, length($colors)), 1) } } @mixin sgradient($type:'linear', $from:'top', $colors:((rgba(42,179,221,1), 0%),(rgba(183,80,80,1), 100%))) { $orientation-string: orientation-string($type, $from); $orientation-string-w3c: orientation-string($type, $from, $w3c:true); $color-string: #{color-string($colors)}; $css-string: gradient(#{$orientation-string}#{$color-string}); $css-string-w3c: gradient(#{$orientation-string-w3c}#{$color-string}); $ie-gradient-type: 0; @if $type != 'vertical' { $ie-gradient-type: 1 } background-color: #{ie-colors($colors, false)}; background: -webkit-#{$type}-#{$css-string}; background: -moz-#{$type}-#{$css-string}; background: -ms-#{$type}-#{$css-string}; background: -o-#{$type}-#{$css-string}; background: #{$type}-#{$css-string-w3c}; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=#{$ie-gradient-type}, StartColorStr='#{ie-colors($colors)}', EndColorStr='#{ie-colors($colors, false)}'); } [/css]

Web制作で汎用性のあるSassのmixinは、下記ページのまとめもどうぞ。

sponsors

top of page

©2018 coliss