*

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

  関連記事

セカイカメラ

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

写真

アドテック九州2014にちょこっと行ってみた

去年やたら盛り上がってたイメージがあったんですが、そのときは行けなかったので今年初めて行ってみました。 といっても、2日

midashi_catch

CSSでborderにグラデーションを使って、よくある見出しを作る

borderにグラーデーションって、あまり使い勝手がない気もしますが、たまたま見出しとかに使ってみる機会があったのでやっ

b

CSS3の「border-image」プロパティを使ってborderが斜線の枠を作る

あまり使う機会はないかもしれませんが、上記のようにDIVの枠線をデザインしたい場合に使用します。 1)背景用の画像を作成

no image

Macのソフトとアドオンを整理する

【ブラウザ】 ■Chrome アドオン: Xmarks(ブックマーク同期) Google Reader Notifier

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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