html - 純粋なcssグラデーション

Question

下の画像のように純粋なCSSでグラデーションをプロットする方法を知っている人はいますか？

IEで動作する必要はありません。動作させることはできますが、画像のように左右のグラデーションを細くすることができないようです。どんなアイデアでもありがたいです。繰り返しますが、これはストレートcssを使用してこれを行います。

Answer 1

このWebサイトは、CSSグラデーションを実行するのに最適です。

http://www.colorzilla.com/gradient-editor/

画像やCSSをインポートすることもできます。

例は次のとおりです。

background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

Answer 2

なぜこれにグラデーションが必要なのですか？ドロップ シャドウはどうですか。

例

Answer 3

これは非常に複雑な作業です。前の div の後ろに 1 つの div を配置します。後ろにあるのは影を作成する場所で、それを変換して配置し、その効果を実現します。これは、このテクニックを実行するためのガイド ガイドです (1 つのコーナーにありますが、少し微調整してその効果を得ることができます)。しかし、彼らはその日の私の検索スキルを逃れているようです.

http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow

Answer 4

純粋な CSSでは、 radial-gradientを使用できます。

その影をエミュレートする div があり、幅が 300 ピクセル、高さが 100 ピクセルであると仮定すると、次のように効果を達成できます。

background: radial-gradient(70% 10%,gray 20%, white 60%);
background-position: 0px -54px;
background-size: 100% 110%;

これが例です -->ここにリンクの説明を入力してください