乱雑モックアップ   らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。

自分メモ

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

• firefox / -moz-linear-gradient / css gradients in Firefox 3.6 / -moz-linear-gradient – MDC
• safari,chrome / -webkit-gradient / Safari CSS Visual Effects Guide: Gradients
• ie / filter:progid:DXImageTransform.Microsoft.gradient / Gradient Filter

疑問

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

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が出てくる、感謝。

• CSS3 グラデーション（gradient）の指定方法 | CSS Lecture
• hail2u.net – Weblog – CSSグラデーションのちょっとしたテクニック #1
• CSS3のグラデーションを試してみる | A Day in the Life

なんかだかいろんな書き方が出来るみたい。たとえばこんな感じ。

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でもいい。*/
);

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

正の数

負の数

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

斜めストライプの作り方

firefox

-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%
);

Safari,Chrome

-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))
);

注意

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

参考｜ストライプ

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

参考｜ジェネレーター

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