LabEx
ログイン登録

CSS を使ったグラデーション テキストの作成

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、CSS におけるグラデーション テキストの概念を探ります。この実験の目的は、linear-gradient() 関数を使用してグラデーション テキストを作成する方法、および webkit-text-fill-color と webkit-background-clip プロパティを使用してグラデーション バックグラウンドでテキストを埋める方法を理解することです。この実験が終わるとき、あなたはウェブページのデザインを向上させることができる視覚的に魅力的なグラデーション テキストを作成することができるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

グラデーション テキスト

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

テキストにグラデーション カラーを与えるには、CSS プロパティを使用できます。まず、linear-gradient() 値を持つ background プロパティを使用して、テキスト要素にグラデーション バックグラウンドを与えます。次に、webkit-text-fill-color: transparent を使用して、テキストを透明色で埋めます。最後に、webkit-background-clip: text を使用して、バックグラウンドをテキストでクリップし、グラデーション バックグラウンドを色としてテキストに埋めます。以下はコードの例です。

<p class="gradient-text">Gradient text</p>

.gradient-text {
  background: linear-gradient(#70d6ff, #00072d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

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

まとめ

おめでとうございます！あなたはグラデーション テキストの実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。