美しいグラデーションが簡単に利用できる！グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient
Post on:2014年12月1日
sponsorsr
垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描く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
