CSSを編集してグラデーションを作る(Linear Gradient)
ブログのカスタマイズなんかをやっていたりすると必ずと言えるほど頻繁に登場する”CSS”。CSSって使っているうちになんとなく必要な時にググって適応させりゃいいやって感覚だったが、せっかくなので覚えたことなんかを記事にしてみようと思う。
今回紹介するのはCSSを使ったグラデーションの1つ
“Linear Gradient“。この他に”Radial Gradients“というグラデーションも存在するが、また次回説明することにする。
CSSを編集してグラデーション効果を!!
グラデーションの記事を書くわりにはブログのデザインにグラデーションを使っていないが・・・覚え書きとして残しておこう。HTMLやCSSなど、僕も大して詳しいわけではないのだが、グラデーションってどうやって作るんだろうと思った時にググったりしているうちにCSSで簡単にできてしまうということがわかった。しかも、今は自動で生成してくれるツールサイトの様なものまであり、はっきり言ってそっちで作ったほうが早いじゃん!!って思ったが、せっかく調べたりしたのでやっぱり書いてみることにする。
Linear Gradient
おそらく、最も一般的なタイプのグラデーション。左から右、上から下などの線形グラデーション。色を選択して方向を書くことで自由にカスタマイズできる。その他にRadial Gradientsという円形グラデーションというのも存在するが、今回は線形グラデーションの説明。
上から下へのグラデーション
|
1 2 3 4 5 6 |
.gradient { background-image: linear-gradient( red, yellow /* red(赤)からyellow(黄)へグラデーション */ ); } |
方向指定しないとこのように上から下へと自動で表示されるようになるようだ。redやyellow以外ももちろん16進数やRGBのカラーコードを使用することが出来る。
左から右へのグラデーション
|
1 2 3 4 5 6 7 |
.gradient { background-image: linear-gradient( to right, /* to(へ) right(右) 右へという意味 */ red, yellow /* red(赤)からyellow(黄)へグラデーション */ ); } |
左から右へのグラデーションをしたい場合は”to right“つまり右へというコードを入力することで実現できる。
左下から右上へのグラデーション
|
1 2 3 4 5 6 7 |
.gradient { background-image: linear-gradient( to top right, /* to(へ) top(上) right(右) 右上へという意味 */ red, yellow /* red(赤)からyellow(黄)へグラデーション */ ); } |
正方形のボックスにこのようなグラデーションを適応させると45度の角度でのグラデーションになるが、今回の場合は正方形ではないので綺麗に45度にはならない。もし45度として指定したい場合は “to top right”のところを”45deg”に変更するときっちり45度で適応されるようだ。
複数色でのグラデーション
|
1 2 3 4 5 6 7 8 9 10 |
.gradient { background-image: linear-gradient( to right, /* to(へ) right(右) 右へという意味 */ red, /* red(赤) */ #f06d06, /* #から始まる16進数コード */ rgb(255, 255, 0), /* RGBコード */ green /* 直接greenを指定 */ ); } |
グラデーションでは2色だけではなく、複数の色を混ぜてグラデーションにすることができる。
グラデーションの開始位置の指定 その1
|
1 2 3 4 5 6 7 8 9 10 |
.gradient { height: 100px; background-color: red; background-image: linear-gradient( to right, /* to(へ) right(右) 右へという意味 */ red, /* red(赤) */ yellow 10% /* yellow(黄) 10%(10%進んだところから) */ ); } |
グラデーションの開始位置を指定することができる。上記の場合は左から右へのグラデーションで、10%進んだところから黄色に色を変えるということになる。
グラデーションの開始位置の指定 その2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.gradient { height: 100px; background-color: red; background-image: linear-gradient( to right, /* to(へ) right(右) 右へという意味 */ red, /* red(赤)のグラデーション */ red 25%, /* 25%進んだところから赤のグラデーション */ yellow 25%, /* 25%進んだところから黄色のグラデーション */ yellow 50%, /* 50%進んだところから黄色のグラデーション */ red 50%, /* 50%進んだところから赤のグラデーション */ yellow 75% /* 75%進んだところから黄色のグラデーション */ ); } |
グラデーションの開始位置の幅を調整することによって2色くっきりとわけることもできる。同じ%を指定し、その間でグラデーションを完成させるようにすると可能になる。
対応しているブラウザ
CSSでグラデーションをするにおいて、対応しているブラウザやブラウザによってコードが違ったりすることがあるので一覧を記載しておく。尚、本記事は新バージョンでの方法なので非対応のブラウザを使用している人もまだまだ多い可能性はある。
- No Support：非対応。
- Old：オリジナルwebkitのみ使用可能。from()、color-stop()などのコードを使用する。
- Tweener：旧バージョンのシステムを使用。
- New：新バージョンのシステムを使用。
| ブラウザのバージョン | 対応 | |
| Chrome | 1-910-25
26 |
OldTweener
New |
| Safari | 3.0-4.0-5.0
5.1-6.0 6.1 |
No supportOld
Twener New |
| Firefox | 3.5-3.6-15
16 |
No supportTweener
New |
| Opera | 11.0-11.1-11.5
11.6-12 12.1 15 |
No supportTweener(linearのみ)Tweener(radial可)
Tweener New |
| IE | 8-9
10+ |
No supportフィルターのみ
New |
| Android | 2.02.1-3.0
4.0- |
No supportTweener
New |
| iOS | 3-3.2-4.3
5.0-6.1 |
No supportTweener
New |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.gradient { /* Fallback (could use .jpg/.png alternatively) */ background-color: red; /* SVG fallback for IE 9 (could be data URI, or could use filter) */ background-image: url(fallback-gradient.svg); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */ background-image: -webkit-gradient(linear, left top, right top, from(red), to(#f06d06)); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background-image: -webkit-linear-gradient(left, red, #f06d06); /* Firefox 3.6 - 15 */ background-image: -moz-linear-gradient(left, red, #f06d06); /* Opera 11.1 - 12 */ background-image: -o-linear-gradient(left, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */ background-image: linear-gradient(to right, red, #f06d06); } |
via:css-tricks.com
