1

テキストのフェードは、左側に塗りつぶされたテキスト、右側にフェードされたテキストで表示されます。この例では、css のみを使用して木星をフェードさせて地球と火星のように見せる方法を作成しました。

.hello-jupiter {
    display:inline-block;
    background: rgba(215, 215, 215, 1);
    color:white;
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
}

ここに画像の説明を入力

jsfiddle <-- 実際にはグラデーションではなく box-shaodw を使用します

4

2 に答える 2

0

ここに答えがあります。div を右に浮かせて、不透明度を 0 から 100% にフェードさせました。

.hello-jupiter {
    display:inline-block;
    background: rgba(215, 215, 215, 1);
    color:white;
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
    position:relative;
}

.fader {
    position:absolute;
    top:0px;
    right:0px;
    display:block;
    width:75px;
    background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 75%)
}

ここに画像の説明を入力

http://jsfiddle.net/w92xv/45/

于 2013-02-05T03:03:04.190 に答える
0

このウェブサイトはCSSに便利だと思います...

http://www.css3maker.com/css-gradient.html

css3maker Web サイトから生成された CSS :

.hello-jupiter {
    display:inline-block;
    background: rgba(215, 215, 215, 1);
    color:white;
    background:-webkit-gradient(linear, 100% 0%, 37% 0%, from(#FFFFFF), to(#000000))
}

これは、Chrome および Safari バージョン 4.0 以降でのみ機能します。

于 2013-02-04T05:49:22.043 に答える