CSSを編集してグラデーションを作る(Linear Gradient) | BitzEdge

CSSを編集してグラデーションを作る(Linear Gradient)

CSSを編集してグラデーションを作る(Linear Gradient)

ブログのカスタマイズなんかをやっていたりすると必ずと言えるほど頻繁に登場する”CSS”。CSSって使っているうちになんとなく必要な時にググって適応させりゃいいやって感覚だったが、せっかくなので覚えたことなんかを記事にしてみようと思う。

今回紹介するのはCSSを使ったグラデーションの1つ

Linear Gradient“。この他に”Radial Gradients“というグラデーションも存在するが、また次回説明することにする。

 

CSSを編集してグラデーション効果を!!

グラデーションの記事を書くわりにはブログのデザインにグラデーションを使っていないが・・・覚え書きとして残しておこう。HTMLやCSSなど、僕も大して詳しいわけではないのだが、グラデーションってどうやって作るんだろうと思った時にググったりしているうちにCSSで簡単にできてしまうということがわかった。しかも、今は自動で生成してくれるツールサイトの様なものまであり、はっきり言ってそっちで作ったほうが早いじゃん!!って思ったが、せっかく調べたりしたのでやっぱり書いてみることにする。

 

Linear Gradient

おそらく、最も一般的なタイプのグラデーション。左から右、上から下などの線形グラデーション。色を選択して方向を書くことで自由にカスタマイズできる。その他にRadial Gradientsという円形グラデーションというのも存在するが、今回は線形グラデーションの説明。

 

上から下へのグラデーション

See the Pen ApjBb by pey (@pey) on CodePen.

方向指定しないとこのように上から下へと自動で表示されるようになるようだ。redやyellow以外ももちろん16進数やRGBのカラーコードを使用することが出来る。  

 

左から右へのグラデーション

See the Pen ymjkA by pey (@pey) on CodePen.

左から右へのグラデーションをしたい場合は”to right“つまり右へというコードを入力することで実現できる。

 

左下から右上へのグラデーション

See the Pen icgFE by pey (@pey) on CodePen.

正方形のボックスにこのようなグラデーションを適応させると45度の角度でのグラデーションになるが、今回の場合は正方形ではないので綺麗に45度にはならない。もし45度として指定したい場合は “to top right”のところを”45deg”に変更するときっちり45度で適応されるようだ。

 

複数色でのグラデーション

See the Pen KDcwr by pey (@pey) on CodePen.

グラデーションでは2色だけではなく、複数の色を混ぜてグラデーションにすることができる。

 

グラデーションの開始位置の指定 その1

See the Pen rzEBl by pey (@pey) on CodePen.

グラデーションの開始位置を指定することができる。上記の場合は左から右へのグラデーションで、10%進んだところから黄色に色を変えるということになる。  

 

グラデーションの開始位置の指定 その2

See the Pen oEzwv by pey (@pey) on CodePen.

グラデーションの開始位置の幅を調整することによって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

 


 

via:css-tricks.com


Facebook Auto Publish Powered By : XYZScripts.com
Menu