グラデーションの基本
|
1 |
<div class="demo gradation">線形</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.demo { width:90%; height:200px; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; padding-top: 20px; padding-left: 20px; background-color: #CCC; color: #FFF; } |
|
1 2 3 4 5 |
.gradation { background: linear-gradient(to bottom, #666, #000, #666); background: -moz-linear-gradient(top, #666, #000, #666); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666)); } |
グラデーションの種類 (線形、linear)
- mozilla系ブラウザ
background: -moz-linear-gradient(top, #666, #000, #666);
- webkit 系ブラウザ
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));
グラデーションの方向（共通）
background: linear-gradient(to bottom, #666, #000, #666);
to top 下から上へグラデーション
to bottom 上から下へ
to left 右から左へ
to right 左から右へ
to right bottom 左上から右下へ
グラデーションの方向 （mozilla系とwebkit系ブラウザ）
- mozilla系ブラウザ
background: -moz-linear-gradient(top, #666, #000, #666);
top 上から下
bottom 下から上
left 左から右
right 右から左
top -45deg 左上から右下 - webkit系ブラウザ
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));
left top, left bottom 上から下
left bottom, left top 下から上
left top, right bottom 左から右
right top, left bottom 右から左
left top, right bottom 左上から右下
開始の色から終了の色
- mozilla系ブラウザ
background: -moz-linear-gradient(top, #666, #000, #666);
開始 #666 → #000 → #666 終了%を使って色の領域を指定することもできます。
開始 #666 0% → #000 30% → #666 終了 - webkit 系ブラウザ
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));
開始 color-stop(0, #666) → color-stop(0.5, #000) → color-stop(1.0, #666) 終了開始色from（色のみ） → color-stop(0.5, #000) → ,終了色to（色のみ）でもOK
開始 from(#666) → color-stop(0.5, #000) → to(#666) 終了
色はRGBaで指定することもできますが、とりあえず基本はこれで十分だと思います。
グラデーションの種類 (円形、radial)
background: radial-gradient(#F00, #fff 33%, #000);
アクアブルー
|
1 2 3 4 5 6 7 8 |
.gradation2 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd)); background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); } |
クリスタルレッド
|
1 2 3 4 5 6 7 8 |
.gradation3 { background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #ff6600), color-stop(0.52, #ea2804), color-stop(0.50, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.00, #f1b9b0)); background: -webkit-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%); background: -moz-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%); background: -o-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%); background: -ms-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%); background: linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%); } |
シンプルホワイト
|
1 2 3 4 5 6 7 8 9 10 |
.gradation4 { background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f1f1f1), color-stop(51%, #e1e1e1), color-stop(100%, #f6f6f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 ); /* IE6-9 */ } |
レインボー
|
1 2 3 4 5 6 7 8 |
.gradation5 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f00), color-stop(0.16, #ff0), color-stop(0.33, #0f0), color-stop(0.51, #0ff), color-stop(0.67, #00f), color-stop(0.85, #f0f), color-stop(1.00, #f00)); background: -webkit-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%); background: -moz-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%); background: -o-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%); background: -ms-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%); background: linear-gradient(to bottom, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%); } |
グラデーションが簡単に作れるサービス
- 上のグラデーションをコピペしたサイトですが、作業時間の短縮になるのでこういうサービスは利用したほうがよいと思います。
https://grad3.ecoloniq.jp/
https://www.colorzilla.com/gradient-editor/ - グラデーション以外にもいろいろなことができる、まさしくCSS3メーカーです。
https://css3maker.com/
コメントを残す