linear-gradientでグラデーションと斜めストライプ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

自分メモ

これもborder-radiusのようにfirefoxとsafari,chromeで書き方が変わる。
IEはfilterを使う事でグラデーションをかけられる。
mozillaは色の区切りをpxで指定できるけどwebkitは%指定しか出来ない。

疑問

/ ベンダープレフィックスを外した時、どの書き方が正式なんだろう?

w3c editor’s draft / 7.1. Linear Gradientsを参考にするならfirefox用の書き方が正式に近い?のかな。

linear-gradient() syntax

linear-gradient([<bg -position> || <angle>,]? <color -stop>, </color><color -stop>[, </color><color -stop>]*);</color></angle></bg>

グラデーションの使い方

すでに大勢の人がlinear-gradientの記事を書いているので検索するとポンポンtipsが出てくる、感謝。

なんかだかいろんな書き方が出来るみたい。たとえばこんな感じ。
[css]background-image:-moz-linear-gradient(
-90deg,/*開始位置、角度 (終了位置いらず)*/
rgb(201,201,201),/*開始色と位置:カラーコード、色名、rgb、rgbaなどで指定。半角ブランクの後に単位%やpxで位置を指定出来る(省略可)。*/
rgb(132,132,132)/*終了色*/
);
background-image:-webkit-gradient(linear,
left top, left bottom,//開始位置、終了位置
color-stop(0,rgb(201,201,201)),/*位置[0~1の間、0.25とか0.7とか],色[#rrggbb,RGB,RGBa,色の名前]*/
color-stop(1,rgb(132,132,132))
/*from(rgb(201,201,201)),開始位置*/
/*to(rgb(132,132,132))終了位置で指定してもいいしcolor-stopでもいい。*/
);[/css]

こんな風なグラデーションになる。

開始位置をdegで指定した場合。

正の数
負の数

赤から青のグラデーションを例に。

0deg
left top, right top,
→左から右
90deg
left bottom, left top,
↑下から上
180deg
right top, left top,
←右から左
270deg
left top, left bottom
↓上から下

斜めストライプの作り方

斜めストライプ

firefox

[css]
-moz-background-size:5px 5px;
background-image:-moz-linear-gradient(
-45deg,
rgba(100, 100, 100, 1),
rgba(100, 100, 100, 1) 25%,
rgba(250, 250, 250, 1) 25%,
rgba(250, 250, 250, 1) 50%,
rgba(100, 100, 100, 1) 50%,
rgba(100, 100, 100, 1) 75%,
rgba(250, 250, 250, 1) 75%,
rgba(250, 250, 250, 1) 100%
);
[/css]

Safari,Chrome

[css]
-webkit-background-size:5px 5px;
background-image: -webkit-gradient(
linear,
left top, right bottom,
color-stop(0, rgba(100, 100, 100, 1)),
color-stop(0.25, rgba(100, 100, 100, 1)),
color-stop(0.25, rgba(250, 250, 250, 1)),
color-stop(0.50, rgba(250, 250, 250, 1)),
color-stop(0.50, rgba(100, 100, 100, 1)),
color-stop(0.75, rgba(100, 100, 100, 1)),
color-stop(0.75, rgba(250, 250, 250, 1)),
color-stop(1, rgba(250, 250, 250, 1))
);[/css]

注意

background-sizeで太さを決める
5px未満にするとfirefoxで綺麗に表示されかったりした。

参考|ストライプ

CSS3のgradientプロパティで斜めのストライプ背景を描いてみる

参考|ジェネレーター

http://tools.westciv.com/gradients/
CSS3プロパティジェネレーター | CSS-EBLOG

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.