読者です 読者をやめる 読者になる 読者になる

purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

IE9でcss3のグラデーションを使う方法

外部SVGファイルを読み込む

【CSS3】IE9にCSS3のグラデーションを適用する | r-tgw.net:WEBの備忘録 – ブログ -

↑の記事みたいに
svgファイルで外部ファイル化すればいいらしいんだけど、どうにも上手くいかない。

SVGデータをURLエンコードしてcss内に記述する

SVG Gradient をSASS (LESS) で生成して CSS Gradient として扱う mixin | ヨモツネット

↑の記事に書いてありました。


で、その為のジェネレータが

Cross-Browser Gradient Generator


こんな感じのを書いてあげればIE9にもグラデがあたる!

background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDIxNSwxNjYsNTMsMSk7IiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiYSgxNTQsMTA4LDIsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);


ちなみに、その他のブラウザ用のはこっち
CSS Gradient Background Maker