CSS を使ったエッチングされたテキストエフェクトの作成

はじめに

この実験では、CSS を使って「エッチング」または彫刻されたテキストエフェクトを作成する方法を学びます。このエフェクトは、Web デザインにユニークでスタイリッシュな雰囲気を与えることができ、意外にも実現するのは簡単です。シャドウ、背景、およびテキストの色を調整することで、背景に彫り込まれたようなテキストの錯覚を作り出すことができます。この楽しくて創造的なテクニックを探求しましょう！

Skills Graph

エッチングされたテキスト

VM 内には既にindex.htmlとstyle.cssが用意されています。

背景に表示されるテキストに「エッチング」または彫刻された効果を与えるには、次の CSS プロパティを使用します。

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

text-shadowプロパティは、原点位置から水平方向に0px、垂直方向に2pxオフセットされた白い影を作成します。この効果を得るには、背景が影よりも暗いことを確認してください。また、テキストの色を少し薄くすることで、背景から彫り出されたように見えるようにします。最後に、etched-textクラスを、段落などの目的の HTML 要素に適用することで、この効果を実現します。

<p class="etched-text">I appear etched into the background.</p>

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080タブを更新することで、Web ページをプレビューできます。

まとめ

おめでとうございます！あなたはエッチングされたテキストの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。