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

Post on:2014年12月1日

垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描く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




























©2024 coliss