*

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

  関連記事

XAMPP(1.8.1)で複数サイトのドメイン管理をする(for windows7)

前やったのにまたやり方忘れました。 記憶力なんて、そんなものですね。。 主に「VirtualHostのサイト設定」と「h

no image

evernoteの改行削除なおったんすか?

世間的に大絶賛の「EVERNOTE」。 EVERNOTE 自分一度使ってみたけどすぐ使わなくなりました。 なんでかいうと

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

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

wordpressでcolorboxを使用した際、スマホでも画像表示を最適化する方法

自分のblogをちまちまリニューアルさせて2ヶ月くらいでしょうか。 久しぶりにスマホで見たら、記事に投稿してる画像の表示

セカイカメラ

iPhoneアプリで面白そうなのがでてきたようなので試す。 セカイカメラてアプリ。 よくこんなん思いつくなと思っちゃいま

コメントを残す

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


*

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

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

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

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

実は先月で退職しました

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

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