問題タブ [linear-gradients]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
36852 参照

css - 背景画像を使用せずに純粋なcssでクロスブラウザのテキストグラデーション

私はテキストのグラデーションをたくさん試しました。サファリとクロームのコードを見つけましたが、他のブラウザとは互換性がありません。背景画像を使わずに動作させたい。適切な解決策がある場合は、親切に提供してください。

0 投票する
3 に答える
7916 参照

image - ウェブページやアプリケーションのパフォーマンスを可能な限り高く保つには、画像と CSS のどちらを使用する方がよいでしょうか?

私のプロジェクトのクリエイティブ デザイナーと私は、ユーザー エクスペリエンスの特定の側面を作成するために、彼のコンプのスライスを使用するか、ブラウザーのレンダリング エンジンに依存するかについて、友好的な意見の相違がありました。

具体的な例の 1 つは、ウィジェットの幅全体を占める水平の「バー」です。彼は、さまざまな色と不透明度のいくつかのストップを含む非常におしゃれなグラデーションを作成しました。彼は、画像の小さいサイズが望ましいか、グラデーションをネイティブに生成するために必要な CSS コードの追加行と少なくとも同等であると感じています。

私たちは既に CSS スプライト技術を使用して、サーバーからの往復回数を減らしているので、それは問題ではありません。現時点では、CSS と HTML を使用したレンダリングに対して、スライスされた画像を使用することの長所と短所にすぎません。

2つの「悪い」オプションであるために必要な画像の大きさに関する決定的なルールはありますか?

更新:何人かの人々が勾配の複雑さを要因として言及しているので、ここでそれを提示します:

非常に複雑です!;-)

0 投票する
1 に答える
3300 参照

css - 単色で停止および継続するボディCSSグラデーション

この質問に似たものがここで尋ねられました- 特定の高さで停止し、単色でさらに続くHTML / CSSグラデーションですが、私が見る限り、これを背景色のボディに使用すると機能しません-それが私が達成したいことです。

具体的には、ページの上部を水色にし、さらに200ピクセル下の濃い青にグラデーションを付けてから、ずっと濃い青を続けてほしいと思います。

助けてくれる人に感謝します、

アルフォ。

0 投票する
3 に答える
2570 参照

css - Modernizr が CSS グラデーションにプレフィックスを追加しない

CSS グラデーションで Modernizr を使用しようとしています。Modernizr がプレフィックスを追加できるようになったことを読みました。だから、私はこれを私のcssファイルに設定しました:

そして、これを次のように変換する必要があることを理解した場合:

しかし、何も起こらず、私のグラデーションは表示されません。それはバグですか、それとも何か不足していますか?

0 投票する
1 に答える
1961 参照

android - Android - カスタム タイトル バーのグラデーションの問題

カスタム グラデーションを作成し、LinearLayout の背景に適用したいと考えています。

グラデーションのコードは次のとおりです。

以下のようなグラデーションが必要です。

ここに画像の説明を入力

どういうわけか私はこの効果を得ていません。角度などに関して何か間違ったことをしていますか/グラデーションにさらに属性を適用する必要がありますか?

0 投票する
2 に答える
873 参照

android - 幅を取得してLinearGradientを適切に設定する方法

SeekBarからカラーチューザーを作成しています。これまでのところ、onCreate()で描画可能な進行状況を次のように正常に置き換えました。

これは完璧に機能します!結果はまさに私が探しているものですが、私が懸念していることの1つは、LinearGradientのハードコードされた幅(100f)です。

このダイアログはまだ実現されていないため、SeekBarもDialogも幅がないようです。つまり、colorChooser.getWidth()は0を返します。

幅が小さすぎる場合、グラデーションは左側で圧縮されます。大きすぎると、グラデーションの一部のみが表示されます。線形グラデーションを正しく表示するように設定するための適切な幅の値を取得するにはどうすればよいですか?

ありがとうございました!

0 投票する
2 に答える
294 参照

css - 背景画像と線形グラデーション

右上に背景画像を配置し、残りの部分に背景色を使用したdivがありますが、色の代わりに線形グラデーションを使用することはできますか?

0 投票する
1 に答える
234 参照

css - 背景の繰り返しと透明な線形グラデーションの組み合わせはフロートと互換性がありませんか?

これは、最新のすべてのブラウザーと IE7 および IE8 と互換性がある必要があります。

私がやろうとしているのは、ページの背景画像を繰り返し、下部を暗くする線形フェードを使用することです。http://i.imgur.com/rrzyw.jpg

これが私のコード例です: http://jsfiddle.net/hxk2d/2/

ご覧のとおり、上記の例には 2 つのフローティング div があります。ボディの線形グラデーションが何らかの理由で表示されません。左のdivが浮かんでいることが原因であることがわかりました。

左の div のフロートを削除するとすぐに、グラデーションが表示され始めますが、コンテナー内にのみ表示されます。

明らかに、フローティング div があるかどうかに関係なく、これが機能することを望みます。私のテスト ブラウザは Chrome と Firefox の両方で、どちらも同じ動作を実行しました。

私は何が欠けていますか?

0 投票する
1 に答える
1231 参照

internet-explorer-9 - CSS3 PIE:線形グラデーションはIE9では機能しません

私は自分のサイトでCSS3PIEを使用していますが、線形グラデーションがIE9で機能しないことに気づきました。以前、IE9で問題なく線形グラデーションサポートにPIEを使用したことがあるため、今回の問題が何であるかを理解できません。

私が試した/検討したこと:

  • IE9をサポートするBeta5を使用しています
  • IE開発者ツールバーを使用してページのドキュメントモードをIE7/8に切り替えるとグラデーションが機能するため、スタイルシートのPIE.htcへのパスが正しいことはわかっています。
  • 同じサーバー上の別のサイトのIE9でグラデーションが機能するため、サーバーが正しいコンテンツタイプでPIE.htcを提供していることを知っています(さらに、手動でファイルに移動すると、ファイルを保存するように求められます。これは証明です。 PIEのドキュメント/フォーラムによる正しいコンテンツタイプの)

私は困惑しています。過去にPIEを使用した方法と何も変わらないように見えます。また、これまでIE9にグラデーションが表示されないという問題が発生したことはありません。

0 投票する
2 に答える
2134 参照

css - CSS3線形グラデーションでグラデーションを停止するにはどうすればよいですか?

このサンプルページの灰色のバーを参照してください。

http://dss.com.bo/inicio.aspx

これがCSS3を使用してそのグラデーションを再作成する私の試みです-CSS3PIEも使用しています:

この結果は次のようになります。

ここに画像の説明を入力してください

どうすれば出血効果を減らして、色の変化を難しくすることができますか?