検索
ホームページウェブフロントエンドCSSチュートリアルテキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

この記事では、CSS と SVG を使用して、テキストにグラデーション、ストローク、シャドウ効果を追加する方法を紹介します。

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

一部の Web アクティビティ ページでは、今のところ、次のような特別に処理されたタイトル テキストがよく見られます。特殊なフォントを無視すると、デザイン ドラフトのレイヤー スタイルから、

gradient

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)ストローク

投影という 3 つのテキスト効果があることがわかります。 #野心的なフロントエンドとして、もちろん画像を直接使用しません~ここでは CSS と SVG を使用してそれを実現します。一緒に見てみましょう

注意: この記事には多くの詳細が記載されています。興味がない場合は、一番下に直接ジャンプしてオンライン デモをご覧ください。テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

##1. CSS テキスト グラデーション

#まずCSSでの実装を見てみましょう。

CSS にはテキストのグラデーションを設定する直接プロパティはありません。通常、テキストは単色のみです。ただし、背景クリッピング

background-clip

を使用して、テキスト領域に背景色を表示できます。テキストにグラデーションがあるように見えます
<p class="text">为你定制 发现精彩</p>
.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
  -webkit-background-clip: text;
}

しかし、これは効果がなく、テキストは

##理由は実は非常に単純です。背景がトリミングされているため、最後に表示されるのは実際には背景色です。色付きのテキストがカバーされています。背景なので、ここでテキストの色を設定する必要があります。透明にするだけです。これは、color

-webkit-text-fill-color

で実現できます。

.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /*需要文字透明*/
}

この方法でテキスト グラデーション効果を確認できますテキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

2. SVG テキスト グラデーションテキスト グラデーションを見てみましょうSVG で。

SVG は当然テキスト グラデーションをサポートしています。テキストは通常​​のベクター パスとして扱うことができます。構造は次のとおりです。

<svg>
  <text>为你定制 发现精彩</text>
</svg>

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)fill

で直接塗りつぶすだけですが、ここでの塗りつぶしは少し面倒であることに注意してください。グラデーションは CSS のようにはできず、特別なグラデーション タグを使用する必要があります

。興味がある場合は、

linearGradient - SVG | をご覧ください。 MDN (mozilla.org)

タグで定義する必要があります。 のカラー スロープを定義するために使用されます。グラデーション、offset および stop-color はそれぞれグラデーションのノードと色を定義し、fill 属性 (ID を指定) でグラデーションを塗りつぶします。

<svg>
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
  <text class="text">为你定制 发现精彩</text>
</svg>

効果は以下の通り(画像の読み込みには問題ありません)

この方法では2つの問題があります テキストは水平方向にも垂直方向にも中央揃えされていません。

グラデーションの方向は水平右方向です。

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

最初の部分を見てください。まず質問。 SVG のテキストの適応処理はまだ非常に弱く、たとえば、CSS で一般的な自動行折り返しは、SVG の指定された位置でのみ手動で折り返すことができます。ここでは、テキスト アンカーの配置とテキスト ベースラインの配置をそれぞれマークする 2 つの属性

text-anchor

    dominant-baseline
  • を使用する必要があります。簡単に言うと、それらは水平方向と垂直方向の配置です。 #
    .text{
      fill: url(#gradient);
    }

    同時に、

  • x

    y
  • の位置も設定する必要があります。ここのパーセンテージは背景と比較できます。 CSS での位置パーセンテージ。
.text{
  text-anchor: middle;
  dominant-baseline: middle;
  fill: url(#gradient);
}

これは、

を中央に表示します。グラデーションの方向に関して、SVG は

x1, # を使用します##y1x2y2 は 2 つの座標セットによって決定されます。長方形の場合、左上隅は

#[0, 0]

、右下隅は

#[1, 1]

となるため、任意の角度を表現できますテキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

##たとえば、垂直下方向が必要な場合は、x1="0" y1="0" x2="0" y2 を設定できます。 ; ="1"、次のように

<text class="text" x="50%" y="50%">为你定制 发现精彩</text>
効果は次のとおりです

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

三、CSS 文字描边

CSS 中有个专门用于文字描边的属性 -webkit-text-stroke,可以控制描边的宽度和颜色,比如

.text{
  -webkit-text-stroke: 2px #333;
}

效果如下

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

确实有描边了,但是文字好像瘦了一圈,如果觉得不太明显,可以再设置大一点

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

从这里可以看出,-webkit-text-stroke其实是 居中描边,并且是覆盖在文本上的,也无法更改描边方式。而事实上,很多设计工具都是可以选择描边方式的,比如 figma

1テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

那么,如何实现外描边效果呢?

也是可以的!用两层文本,一层文本描边,一层文本渐变就可以了,为了节省标签,可以用伪元素来生成

<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>

::before设置渐变,位于上方,原文本设置描边,位于下方,注意把 ::before-webkit-text-stroke去除

.text::before{
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02, #FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}
.text{
    -webkit-text-stroke: 6px #333;
}

叠加示意如下

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

改变不同的描边也不会出现文字“变瘦”的情况

1テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

四、SVG 文字描边

SVG 也可以实现描边效果,和 CSS 比较类似,应该说 CSS 是借鉴 SVG 的,通过 strokestroke-width来控制描边颜色和大小,比如

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
}

可以得到这样的效果

1テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

和 CSS 表现一样,都是居中描边,也无法改变。

不一样的是,SVG 控制更为灵活,默认是先填充、然后再描边,所以看着是描边在填充之上,但是,我们可以改变这种规则,设置先描边,再填充,那么填充的颜色就会覆盖在描边之上了。SVG 中改变这种规则的可以通过 paint-order 来设置,关于这个属性,有兴趣的可以访问张鑫旭老师的这篇文章:CSS paint-order祝大家元旦快乐

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}

这样就实现了外描边效果,是不是比 CSS 方便许多?

1テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

除此之外,SVG 还可以设置描边路径的转角处的形状,比如 figma 中关于转角的设置如下

1テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

SVG 中与之相对应的属性叫做 stroke-linejoin,这里是圆角,可以做如下设置

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
  stroke-linejoin: round; /*路径转角为圆角*/
}

各种属性效果如下

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

五、CSS 文字投影

继续添加效果。CSS 可以通过 text-shadow来添加文本投影

.text{
    -webkit-text-stroke: 6px #333;
  	text-shadow: 0 4px 0 #333;
}

结果变成了这样

1テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

原因其实还和文本渐变有关,渐变其实是背景色,文字是透明的,所以给文字添加阴影,结果阴影就覆盖在了背景之上。除了使用text-shadow,还可以通过 drop-shadow滤镜实现

.text{
  -webkit-text-stroke: 6px #333;
  filter: drop-shadow(0 4px 0 #333);
}

这样就完美实现了

1テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

六、SVG 文字投影

SVG 就比较灵活了,比如上面使用的 drop-shadow滤镜,其实就是借鉴了 SVG 中的 滤镜,所以 SVG 也可以这样实现

<svg>
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stop-color="#FFCF02"/>
          <stop offset="100%"  stop-color="#FF7352"/>
        </linearGradient>
      	<filter id="shadow">
            <feDropShadow dx="0" dy="4" stdDeviation="0" flood-color="#333"/>
        </filter>
    </defs>
    <text x="50%" y="50%" class="text">为你定制 发现精彩</text>
</svg>

这里dxdystdDeviationflood-colordrop-shadow(dx,dy,stdDeviation,flood-color)中的参数是一一对应的,就不多说明了,然后在文字中应用滤镜

.text{
  /*其他*/
  filter:url(#shadow);
}

这样也能实现文字投影

テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

其实 SVG 中大可不必这么麻烦,刚才上面 text-shadow之所以不能使用,就是因为 CSS 实现的文字渐变是背景,是假的文字渐变,但是 SVG 中是真真正正的渐变填充,所以没错,这里可以直接用 CSS 中的 text-shadow 来实现,SVG 和 CSS 现在很多属性和样式都互通了,如下

.text{
  /*其他*/
  fill: url(#gradient);
  text-shadow: 0 4px 0 #333;
}

实现更加简洁

2テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

七、特殊字体处理

通常活动标题会采用一些特殊的字体,英文字体还好,整个引入都可以,但是中文就不行了,大多数中文字体都非常大,可能达到几十MB或者几百MB。其实我们只需要用到出现的字体,如果把出现的文字这一部分的特殊字体单独提取出来,那么整个字体文件将大大减小,这个过程就叫做字体子集化。

那么该如何处理呢?

这里推荐一个工具 Fontmin - 字体子集化方案,关于字体子集化的原理,可以参考这篇文章:性能优化魔法师:中文字体实践篇 - 掘金

2テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

下载客户端后,导入字体文件.ttf,然后输入需要用到的文字,如下

2テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

点击生成,可以得到如下文件

2テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

其中第一个以-embed为后缀的 CSS,里面是转换 base64 后的文件,可以直接引入

@font-face {
    font-family: "HYLiLiangHeiJ Regular";
    src: url("HYLiLiangHeiJ Regular.eot"); /* IE9 */
    src: url("HYLiLiangHeiJ Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("HYLiLiangHeiJ Regular.svg#HYLiLiangHeiJ Regular") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
.text{
  /*其他样式*/
  font-family: "HYLiLiangHeiJ Regular";
}

这样几乎实现了和设计稿完全一致的效果

2テキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)

其实如果从头看下来,应该也能自己实现一个,既能掌握原理,也能加深印象,完全变成自己的了。不过可能不是每个同学都有时间,或者能够静下心来研究每一个案例,所以这里还是整理了一下在线 demo,想要快速看结果的直接访问就行了,如下

CSS 实现可以访问 text-css (codepen.io)

SVG 实现可以访问 text-svg (codepen.io)

八、总结和说明

以上介绍了 CSS 和 SVG 两种不同的方式来实现文本的特殊效果,从效果来看,显然 SVG 要更胜一筹,比如描边更加平滑、也无需多层嵌套,但 CSS 也有优势,比如渐变色和投影更加简单,总结一下

  • CSS 文字渐变本质是背景裁剪,需要将文字颜色设为透明

  • SVG 文字天然支持渐变填充,需要借助 linearGradient 标签

  • SVG 文本居中稍微麻烦点,需要借助 text-anchor 和 dominant-baseline

  • ##CSS ストロークと SVG ストロークは両方とも中央に配置されたストロークであり、変更できません

  • ##CSS の外側のストロークは、多層構造のオーバーレイによって実現できます
  • #SVG はペイント オーダーを使用して、ストロークの上に塗りつぶしを描画できます。
  • CSS テキストのシャドウは、テキストが透明な場合に貫通します。ドロップを使用できます。シャドウは投影をシミュレートします
  • feSVG の DropShadow と CSS のドロップシャドウは似ています
  • SVG は CSS Text の text-shadow を使用して直接実装できますproject
  • フォント サブセット fontmin
  • CSS と SVG にはそれぞれ独自の利点があり、相互に影響を与えます。多くの CSS スタイルは SVG でも使用できます。多くの SVG 属性も CSS に導入され始めており、日常の開発では両方の利点を完全に組み合わせることができます。
プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 !

以上がテキストにグラデーション、ストローク、ドロップ シャドウ効果を追加する 2 つの方法 (CSS と SVG)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます:正気な展開への旅私はリリースがないように感じます:正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境