0

これは WebKit だけのグラデーション テキストの作成方法です。HEREから見つけました。

h1 {
     font-size: 72px;
     background: -webkit-linear-gradient(#eee, #333);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }

x-repeated gradient image を使用してテキストの色のグラデーションを作成する方法はありますか?

4

2 に答える 2

2

はい、グラデーション画像を使用してそれを行うことができます。画像をテキストに重ねるだけです

デモ

<div class="gradient1">
    <h1><span></span>CSS Gradient Text</h1>
</div>

.gradient1 h1 {
    font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
    position: relative;
    margin: 30px 0 50px;
    color: #464646;
}
.gradient1 h1 span {
    background: url(http://i.stack.imgur.com/nrgB0.png) repeat-x;
    position: absolute;
    display: block;
    width: 100%;
    height: 31px;
}

クレジット

編集: CSS ソリューションのみを使用することに興味がある場合は、ほとんどのブラウザーをサポートすると思います

デモ

<span>Isn't this awesome?</span>

span {
    position:relative;
    font-size: 30px;    
}

span:after {
    content: "";
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
于 2013-05-28T08:25:02.223 に答える