[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。

こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;

[mika_chi]

“filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a2d93f', endColorstr='#388235', GradientType=0);”

[kakei]

“:not(:target){ filter: none\9;}”

[glat_design]

過去ブラウザ対応は積極的に断念してるのでもうちょっと短く書ける。単色で行きましょう…ｗ /

[labduck]

ボタン

[saladdays]

ie7の角丸の話

[ysk_lucky-star]

モバイル以外で使おうなんて思う方が間違ってると思うが

[mr_mayama]

ここまでする必要あるのか…？

[kojika17]

面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。

[forcutie]

border-radiusも

[typista]

ぽけったー [CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた

[findcafe]

これでも面倒だと思った僕はWebデザイナー失格ですか? #browsing : [CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。