2

以下のブログに投稿されているような特定のスタイルのボタンが必要なプロジェクトに取り組んでいます。

http://joeygallegos.tumblr.com/

このボタンは、Chrome、Safari、Android、および iPhone/iPod touch でのみ表示されます。そして、クロスブラウザ形式で利用できるようにしたいと思います。私は CSS を手書きで書くことは得意ですが、クロスブラウザーのグラデーションを完全に理解することはできません。誰かがそれをよりよく理解するのを手伝ってくれれば、それは大歓迎です。以下は、グラデーションを作成するために使用したスニペットです。

 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8fc2e8), color-stop(0.5, #54a1d9), color-stop(0.5, #126aa9), color-stop(1, #2ddef2));

可能であれば、-webkit、-moz、-ms、-o、linear などの属性を持つ Google のマークアップのようにしたいと思います。

background-image: -webkit-gradient(linear,left top,left bottom,from(
#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

上記と同じ色で出品していただけると助かります。ありがとうございました！！

4

2 に答える 2

2

グラデーション サポートの最初のバージョンは、Webkit ブラウザーで次の形式で利用できるようになりました。

-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )

使用する場所は次のとおりです。

background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));

しかしその後、Web はそれが複雑すぎると判断し、次のように単純化しました (ほとんどのブラウザーが現在使用しているものです)。

-prefix-linear-gradient( direction|angle, color-stops... )

使用する場所は次のとおりです。

background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

IE は異なる必要があると感じているため、フィルターを使用し、IE10 までグラデーションを表現するこの新しいより良い方法にアップグレードしていません。だから、あなたが持っているものは大丈夫です。IE7-IE9 のサポートが必要な場合は、これも使用します。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");

グラデーションを作成したり、クロスブラウザー コードを生成したりするのに役立つツールも数多くあります (Google は友達です)。Colorzillaには良いものがあります。

于 2012-06-15T23:28:49.877 に答える
0

さまざまな背景画像を定義するだけでbackground-colorなく、どの種類のグラデーションもサポートしていないブラウザー用にプレーンを定義する必要があります。

欠けているように見える唯一のものはfilter、グラデーションを生成するために使用する古い IE のものです。

于 2012-06-15T23:25:54.297 に答える