*

よく使いそうな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

  関連記事

no image

モバイル用

wordpressのモバイル用。便利。でもdocomoとかで見れないので、そっちのプラグインはようわからん。 WPtou

プラグインのAkismetを更新したら「有効期限が切れてます」といわれた

このシルバーウィーク中にwordpressをちょいちょい触っていたら、プラグインのAkismetが未更新になっていました

no image

久々に授業を受ける

会社の派遣さん勉強会でAS3.0についての講義をするということで、無料なこともあり 一緒に受けさせてもらいました。 内容

AndroidでPCサイトを閲覧すると幅が狭まって余白ができる

実機(AQUOS PHONE 206SH)でPCサイトを検証したところ右側にボコっと余白ができる。 ググってるとAndr

気軽にブログを始めるなら「Google Blogger」もありかも→配布テーマも意外とあるよ

「Google Blogger」って、一時期やたら聞いてた単語でしたが、今ってどれくらい普及してるんでしょうか? 最近ち

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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