ここで色のグラデーション

Question

を有する湾曲影を作成すると、私はCSSを使用して複製しようとしていますし、私はちょうどそれを行う方法を考え出すことができない影です。私は何時間も試してみた。私は2つの影の要素を作成する必要があると思うが、私はどのように進むか分からない。
私が手に最も近いものはこれである（最悪の試み - 私が知っている）：

.type-product:before, .type-product:after{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 25px; 
    left: 21px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    box-shadow: 0 35px 20px #777; 
    transform: rotate(-8deg); 
} 
.type-product:after{ 
    transform: rotate(8deg); 
    right: 20px; 
    left: auto; 
} 

ほとんどの感謝任意のCSSの達人は、任意のヘルプを提供することができれば。

注：私はthis linkが私の問題を完全にカバーしているとは思わない。曲線だけで説明していますが、私は色勾配で曲線が必要です...

Answer 1

あなたは:before擬似要素とbox-shadow

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #aaa; 
 
    position: relative; 
 
    background: white; 
 
} 
 

 
div:before { 
 
    content: ''; 
 
    border-radius: 50%; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    transform: translateY(103%); 
 
    box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999; 
 
}

<div></div>

Answer 2

私には、以下に示すような要素をいくつか使用して実現することができます。影は実際にはlinear-gradientで、その上に白い円が配置されています。このアプローチの欠点は、（オーバーレイされた円が単色を必要とするため）堅実な背景でのみ機能することです。

影自体は、透明または白から左へ、白から白へ、または右から白へと変化するグラデーションのように見えるので、box-shadowを使用すると表示されません。

出力は応答性があり、親コンテナのすべてのディメンションに適応できます。ただ、:hoverアクションでそれを参照するには、スニペット内のコンテナ:)

.wrapper { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
} 
 
.content { 
 
    height: 85%; 
 
    width: 100%; 
 
    border: 1px solid; 
 
} 
 
.wrapper:before { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    height: 15%; 
 
    width: 100%; 
 
    background: linear-gradient(to right, transparent 2%, #444, transparent 98%); 
 
} 
 
.wrapper:after { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: -186%; 
 
    /* height of before - height of after - 1% buffer for the small gap */ 
 
    left: -50%; 
 
    height: 200%; 
 
    width: 200%; 
 
    border-radius: 50%; 
 
    background: white; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
/* just for demo */ 
 

 
.wrapper { 
 
    transition: all 1s; 
 
} 
 
.wrapper:hover { 
 
    height: 300px; 
 
    width: 400px; 
 
}

<div class='wrapper'> 
 
    <div class='content'></div> 
 
</div>

Answer 3

でこれを行うことができます他にもこれはあなたのクラスのための良いボックスシャドウでもあります。 （これは好きなものに似ているだけの好みです&）。

.box { 
 
    width: 70%; 
 
    height: 200px; 
 
    background: #FFF; 
 
    margin: 40px auto; 
 
} 
 
.type-product { 
 
    position: relative; 
 
} 
 
.type-product:before { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 17px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 70%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    box-shadow: 0 18px 20px #777; 
 
    transform: rotate(-8deg); 
 
} 
 
.type-product:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 17px; 
 
    right: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    box-shadow: 0 18px 20px #777; 
 
    transform: rotate(8deg); 
 
}

<div class="type-product box"> 
 

 
</div>

あなたはそれを願っています。