Webkit Extensionsで文字に縁取りを設定する：-webkit-text-stroke-color

CSS Extensions の -webkit-text-stroke-color プロパティ

プロパティの値

-webkit-text-stroke-color プロパティには、以下の値を設定できます。

• カラー名: red、blue、green など
• RGB 値: rgb(255, 0, 0)
• RGBA 値: rgba(255, 0, 0, 0.5)
• HEX 値: #ff0000

使用例

h1 {
  -webkit-text-stroke: 2px #ff0000;
}

上記コードは、<h1> 要素の文字に 2px 幅の赤い縁取りを設定します。

• -webkit-text-stroke-color プロパティと併せて -webkit-text-stroke-width プロパティを使用することで、縁取りの幅を設定できます。
• -webkit-text-stroke-style プロパティを使用することで、縁取りのスタイル (solid、dashed など) を設定できます。

補足:

• 上記の情報は 2024 年 3 月 9 日時点のものです。
• -webkit-text-stroke-color プロパティは標準の CSS プロパティではないため、将来のブラウザバージョンで廃止される可能性があります。

-webkit-text-stroke-color プロパティを使ったサンプルコード

h1 {
  font-weight: bold;
  -webkit-text-stroke: 2px red;
}

点線で囲まれた文字

p {
  -webkit-text-stroke: 1px dashed #000;
}

文字の縁取りと影

h2 {
  -webkit-text-stroke: 1px #ff0000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

グラデーションの縁取り

h3 {
  -webkit-text-stroke: 2px linear-gradient(to right, #ff0000, #0000ff);
}

画像で縁取り

h4 {
  -webkit-text-stroke: 2px url(image.png);
}

マスクで縁取り

h5 {
  -webkit-text-stroke: 2px #fff;
  -webkit-text-mask: url(mask.png);
}

アニメーション

h6 {
  -webkit-text-stroke: 2px #ff0000;
  -webkit-animation: stroke 2s infinite alternate;
}

@-webkit-keyframes stroke {
  from {
    -webkit-text-stroke-width: 0;
  }
  to {
    -webkit-text-stroke-width: 2px;
  }
}

これらのコードはあくまでも例です。さまざまな値やオプションを組み合わせて、自分だけのオリジナルな文字装飾を作成してみてください。

補足:

• -webkit-text-stroke-color プロパティは Webkit エンジン搭載ブラウザでのみ動作します。
• 標準の CSS プロパティではないため、将来のブラウザバージョンで廃止される可能性があります。

-webkit-text-stroke-color 以外の方法

text-shadow プロパティは、文字に影を付けるプロパティですが、縁取り効果も表現できます。

h1 {
  text-shadow: 0 0 2px red;
}

上記のコードは、<h1> 要素の文字に赤い縁取りを設定します。

border プロパティは、要素の周りに枠線を表示するプロパティです。文字要素に適用することで、縁取り効果を表現できます。

p {
  border: 1px solid red;
  padding: 5px;
}

上記のコードは、<p> 要素の文字に赤い縁取りを設定します。

outline プロパティは、要素にフォーカスが当たった時に表示される枠線の色とスタイルを設定するプロパティです。

a:focus {
  outline: 2px solid blue;
}

上記のコードは、a 要素にフォーカスが当たった時に青い縁取りを表示します。

SVG を使用して、文字に縁取りを表現することもできます。

<svg viewBox="0 0 100 100">
  <text x="20" y="50" font-size="24">
    <tspan fill="none" stroke="red" stroke-width="2">Hello, world!</tspan>
  </text>
</svg>

上記のコードは、赤い縁取り付きの "Hello, world!" という文字を表示します。

画像

文字を画像として生成し、縁取り付きの画像を代わりに表示する方法もあります。

これらの方法はそれぞれ利点と欠点があります。どの方法を使用するかは、デザインや要件によって異なります。