CSS3はグラデーションテキスト効果を実装します

この記事では主に、グラデーションテキスト効果を実現するための CSS3 について説明します。お役に立てれば幸いです。

1. 方法 1: マスク画像属性

を使用して、テキストのグラデーション効果を実現します

対応する HTML コードは次のとおりです:

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>

HTML に対応する CSS コードは次のとおりです:

.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  
  
.text-gradient[data-text]::after {  
    content: attr(data-text);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

CSSコードからは、「コンテンツコンテンツ生成技術」に加えて、その効果は主にmask-image属性を使用することによって達成され、コンテンツは「Webkitコアブラウザの下でのグラデーション」であることがわかります。 。

2. 方法 2:background-clip + text-fill-color での実装

方法 2 でのテキストのグラデーション効果

ここでの実装は上記よりも簡単です:

<h2 class="text-gradient">天赐美妞</h2>

HTML に対応する CSS コードは次のとおりです:

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};

CSS コードで重要で便利なのは、実際には最後の 3 行です:

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

このメソッドは比較的多くの CSS プロパティを使用しますが、シンプルな構造で使いやすく、色の選択や制御もより正確で分かりやすくなっています。個人的には 2 番目の方法を使用することをお勧めします。

3. 結論

text-fill-color と Mask-image 属性は現在 Webkit コア ブラウザーでサポートされているようであるため、2 つのデモ ページは Chrome または Safari でのみ表示されます。 IE ではもちろん、Firefox ブラウザでも単色で表示されます。

しかし、テキストのグラデーション自体は装飾的な機能なので、プログレッシブエンハンスメントの原理に基づいて、実際のプロジェクトでは大胆に使用することができます。元の機能に影響を与えることなく、数行の CSS コードで、人気が高まっている Chrome ブラウザでより優れた視覚エクスペリエンスを提供できるのはなぜでしょうか。

関連する推奨事項:

カラーグラデーションコードを取得するjs実装

JavaScript計算グラデーションカラーサンプル共有

css3線形グラデーションエントリサンプル共有

以上がCSS3はグラデーションテキスト効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。