1

最近は、ブラウザでのデザインや、エフェクトに画像の代わりに純粋なコードを使用する練習をしています。Web サイトのテキストにグラデーションを追加する方法について、次のようないくつかの方法を使用して見てきました。

(ただし、この手順では.png透過画像を使用します)

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

および純粋なコード オプション:

h1 {  
        position: relative;  
        font-size: 70px;  
        margin-top: 0;  
        font-family: 'Lobster', helvetica, arial;  
    }  

    h1 a {  
        text-decoration: none;  
        color: #666;  
        position: absolute;  

        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));  
    }  

    h1:after {  
        content : 'Hello World';  
        color: #d6d6d6;  
        text-shadow: 0 1px 0 white;  
    }

しかし、私は知りたいと思っていました：

  1. グラデーションの位置を調整するにはどうすればよいですか?
  2. 同等のすべてのブラウザー (IE を除く) でこれをコーディングする簡単な方法はありますか?

以前のいくつかの投稿を確認しましたが、グラデーションの調整に関しては何もありません:

4

1 に答える 1

1

グラデーションの位置を調整するには、次の行を編集する必要があります (場所は正確にはわかりません)。

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));

これに役立つ超クールなツールは、Ultimate CSS Gradient Generatorです。過去に何度もお世話になりました。ブラウザ固有のスタイルもすべて作成します。始めるには良い場所かもしれません。

于 2013-11-12T22:00:26.913 に答える