[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。
こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;
![[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/c76f538a877e78afb07d09e5ff0f87885ac194e9/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_coding.png)
[JS]ベタ塗りのエレメントやページの背景に、繊細で美しいグラデーションを与えるスクリプト -Add Shine
ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。 グラデーションの適用 Add Shineの使い方 Add Shineの使い方は、簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script> <script src="js/addShine.js"></script> Step 2: HTML HTMLはスクリプトを意識することなく、普通に実装します。 <body> <button>ボタン</button> </body> Step 3: CSS ページの背景とボタンは、ベタ塗りにします
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
