divのCSSグラデーションの背景

以下のアクティブなdivと同様のスタイルを得るにはどうすればよいですか？色はやや褪色しているようです。divのCSSグラデーションの背景

2016-10-21 chefcurry7

はあなたがいることを見て、少なくともポストに役立つかもしれない試してみてください人々は元のコードを見ることができます –

それは、フォトショップのデザインから、私はd CSSを持っていません。私はちょうど効果を得るためにCSSをしたい。 – chefcurry7

それがhere記載されているようにあなたは、そのためのlinear-gradientを使用することができます。あなたは、次の操作を行うことができます。

.hoverable:hover { 
    background: -webkit-linear-gradient(white, lightgray); 
    background: -moz-linear-gradient(white, lightgray); 
    background: -o-linear-gradient(white, lightgray); 
    background: linear-gradient(white, lightgray); 
}

あなたはthis Fiddle

出典

2016-10-21 01:52:02

にデモを確認することができ、この

#grad1 { 
 
    height: 200px; 
 
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(rgba(255,0,0,0), rgba(245,245,245,1)); /* Standard syntax (must be last) */ 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<h3>Linear Gradient - Transparency</h3> 
 

 
<div id="grad1"></div> 
 

 
</body> 
 
</html>

出典

2016-10-21 01:57:32 Sytor

divのCSSグラデーションの背景

答えて

関連する問題