自分メモ

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

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

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

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

正の数
負の数

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

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

斜めストライプの作り方

斜めストライプ

firefox

Safari,Chrome

注意

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

参考|ストライプ

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

参考|ジェネレーター

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


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

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.