*

よく使いそうなCSS3のlinear-gradientの指定を整理してみた(2015年3月)

   

mac
CSS3のグラデーションについて、結局どこまで指定したらいいのかわからなくなるので一旦自分用に整理しておきます。

スポンサードリンク

先に参考にさせてもらったサイト
» [CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた
» HTML5:そろそろスッキリさせたい!CSS3 linear-gradient のベンダープレフィックス

上記のサイトでは「-moz-linear-gradient」と「filter」を省いてあったりもされてますが、Mozilla系もIEのレガシーブラウザもまだ捨てきれず(-_-;)
ただOperaはもういっかなーということで下記のようになりました。

上記のサイトを参考にさせてもらいつつ自分用

//CSS
#gradientBox {
	background: -moz-linear-gradient(top, #FFFFFF, #F1F1F1); /* for Mozilla */
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F1F1F1)); /* for Webkit */
	background: linear-gradient(to bottom, #FFFFFF 0%, #F1F1F1 100%); /* for ie10+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F1F1F1', GradientType=0); /* for ie7,8,9 */
}

でもやっぱまだ多いですねー。。
どこまで対応するかなんでしょうが。
ieのレガシーを無視してよくなったら、また整理しようかと思います。

 -Web

Sponsored link

Sponsored link

  関連記事

WordPressでプラグインなしでURLを指定してスクリーンショットを表示する方法

WordPressでスクリーンショットを表示させることって、ちょいちょいあります。 てっきりプラグインなのかと思ってまし

「mal/htmlgen-a」が検出されたとしてブロック→ブロックが解除されるまでの対応

それはある日突然起こりました。自分のブログがブロックされました(汗 (※現在は解決しました) 私は「Sophos」のMa

no image

福岡の写真素材サイト

福岡に住んでて、こんな仕事をしている以上は 使いたいけどなかなか無い福岡の写真素材。 これまた会社の方に良い素材サイト教

no image

ドメインを変更してみました

「そろそろちゃんとドメイン考えないとかな〜」ということで、今更ですがドメイン変更してみました。 これで、いいかげんにちゃ

GoogleとYahoo!の電話コンバージョンタグの設定、番号が複数ならクリックイベントも設定

設定したことなかったので、電話コンバージョンタグの設定をメモっておきます。 ※タグの取得についてはやってないので、他の方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

  • ブログランキング・にほんブログ村へ