右側の要素のグラデーションオーバーレイ

Question

スクロール可能な要素を持つコンテナを作成しました。私は、右側の要素にグラデーションオーバーレイを付けることを望みます。 CSSでそれを作成するにはどうしたらいいですか？

.container { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    overflow-x: scroll; 
 
    width: 1000px; 
 
} 
 

 
.element { 
 
    min-width: 200px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: 10px; 
 
}

<div class="container"> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
</div>

https://codepen.io/naomilea/pen/RjZGaM

Answer 1

あなただけのグラデーションカラーを持っている最後の要素を探しているなら、あなたはこのようなあなたのCSSをコーディングすることができます

.container { 
 
    
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    overflow-x: scroll; 
 
    width: 1000px; 
 
} 
 
.element { 
 
    min-width: 200px; 
 
    height: 100px; 
 
    background-color: grey; 
 
    margin-right: 10px; 
 

 
    } 
 
.element:last-child 
 
{ 
 
    background: -webkit-linear-gradient(to right, grey, white); 
 
    background: -o-linear-gradient(to right, grey, white); 
 
    background: -moz-linear-gradient(to right, grey, white); 
 
    background: linear-gradient(to right, grey, white); 
 
}

<div class="container"> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
    <div class="element"> 
 
    </div> 
 
<div class="element"> 
 
    </div> 
 
    
 
    
 
    
 
</div>

Check updated codepen

Answer 2

あなたはUが赤色である要素がグラデーションオーバーレイを交換する必要があることを意味するグラデーションスタイル

.element { 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(left, red , white); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(left, red, white); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(left, red, white); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, red , white); /* Standard syntax */ 
}