CSS グラデーション フォント プロパティ: Linear-gradient および font-stretch

CSS グラデーション フォント プロパティ: 線形グラデーションとフォントストレッチ、特定のコード サンプルが必要です

現代の Web デザインでは、ユーザーを惹きつけてビジュアルを強化するために、ページの効果により、グラデーション フォントは人気のデザイン トレンドになっています。 CSS には、linear-gradient や font-stretch など、グラデーション フォント効果を実現するためのプロパティがいくつか用意されています。この記事では、これら 2 つのプロパティの使用法に焦点を当て、読者がそれらをよりよく習得できるように具体的なコード例を示します。

1. 線形グラデーション属性

線形グラデーション属性は、線形グラデーションの背景を作成するために使用されます。文字の背景色や枠線の色などに使用できます。グラデーション フォントの場合、テキストの背景色として使用することで効果を実現できます。

linear-gradient 属性を使用してグラデーション フォントを作成するための構文は次のとおりです。

background: linear-gradient(direction, color-stop1, color-stop2, ...);

このうち、direction はグラデーションの方向を指定します。これは次のいずれかの値になります。

• to top ：下から上へのグラデーション
• tobottom：上から下へのグラデーション
• to left：右から左へのグラデーション
• to right：左から右へのグラデーション

color-stop は、グラデーションの色と位置を指定し、パーセンテージまたはピクセル値を使用できます。例:

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
}

上記のコードの効果は、h1 タグ内に赤から緑、青へのグラデーション フォントを作成することです。

2. Font-stretch 属性

font-stretch 属性は、フォントの伸縮度を制御するために使用されます。フォントを太くしたり細くしたりできます。グラデーション フォントのデザインでは、font-stretch 属性を Linear-gradient 属性と組み合わせて使用​​すると、グラデーション フォントをより魅力的にすることができます。

font-stretch 属性を使用するための構文は次のとおりです。

font-stretch: normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;

各値の意味は次のとおりです。

• normal: 通常のフォント幅
• ultra-condensed: 非常にコンパクトなフォント
• extra-condensed: 非常にコンパクトなフォント
• condensed: コンパクトなフォント
• semi-condensed: よりコンパクトなフォント
• semi-expanded: より拡張されたフォント
• expanded: 拡張されたフォント
• extra-expanded: 非常に拡張されたフォント
• ultra-expanded: 非常に拡張されたフォント

たとえば、上記のグラデーション フォント コードを font-stretch 属性と組み合わせて、よりユニークなフォント効果を作成できます。

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
  font-stretch: expanded;
}

上記のコードは、h1 ヘッダーにフォントを作成します。横に伸びて幅が広がります。

概要

グラデーション フォントは、Web ページにユニークな視覚効果を追加し、ユーザーの注目を集めることができます。 CSS の Linear-gradient プロパティと font-stretch プロパティを使用すると、この効果を簡単に実現できます。グラデーション フォントをデザインするときは、必要に応じてフォントのグラデーションの方向と伸縮の程度を調整して、フォントをより魅力的にすることができます。この記事のコード例と説明が、読者がこれら 2 つのプロパティをよりよく理解し、適用するのに役立つことを願っています。

以上がCSS グラデーション フォント プロパティ: Linear-gradient および font-stretchの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。