linear-gradient

構文

linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]?
    <color-stop>
    [, <color-stop>]+
)
Syntax - linear-gradient() - CSS | MDN

Firefox 3.6～15に対応させるには、ベンダー接頭辞を付けて次のようにします。

-moz-linear-gradient(
    [<point> || <angle>,]?
    <stop>,
    <stop>
    [, <stop>]*
)

表示例

背景画像に、

background-image: linear-gradient( ... )

のように適用した場合について、検証します。

コード 実行例 
linear-gradient( white, black )
 
 
linear-gradient( left, white, black )
 
 
linear-gradient( left bottom, white, black )
 
 
linear-gradient( 10deg, white, black )
 
 
linear-gradient( red, yellow, green )
 

ベンダーごとの指定

コード 実行例 
        linear-gradient( white, black )
 
 
    -ms-linear-gradient( white, black )
IE10向け
 
 
   -moz-linear-gradient( white, black )
Firefox 3.6～15向け
 
 
-webkit-linear-gradient( white, black )
Chrome、Safari向け
 

適用例

テキストや画像のフェードアウト

要素の前面に半透明のグラデーションを重ねて表示することで、テキストや画像をフェードアウトさせられます。html - Fading out text on overflow with css if the text is bigger than allowed - Stack Overflow

たとえば対象の下部50%をフェードアウトさせるには、次のようにスタイルを設定します。

.fade-out {
    position: relative;
}
.fade-out:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient( rgba( 255, 255, 255, 0 ), white );
}

<div class="fade-out">テキスト1<br />テキスト2<br />テキスト3</div>
テキスト1
テキスト2
テキスト3
<div class="fade-out"><img src="sample.png" /></div>

linear-gradient非対応の環境への対応

linear-gradient非対応の環境では、その指定が無視されます。よって背景色をグラデーションさせる場合を考えるならば、それが表示されない場合も考慮して単色でも指定しておきます。

background-color: gray;
background-image: linear-gradient( white, black );
 

参考

関連ページ

HTMLの情報サイトから、まとめて検索