はじめに
CSSを使って文字の縁取りを作りたいけど、どうすればいいのかわからない。
そんな初心者の方でも簡単に理解できるように、文字の縁取りの作り方と使い方を詳しく解説していきます。
サンプルコードや応用例も交えて、これを読めばあなたも縁取り文字が作れるようになります。
●CSSで文字の縁取りを作る方法
まずは基本的な方法から始めます。
CSSで文字の縁取りを作るには、text-shadow
プロパティを使います。
このプロパティを使って、縁取りの色や位置を指定することができます。
サンプルコード:
h1 {
color: white;
text-shadow: 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black;
}
このコードでは、h1
タグの文字色を白にし、縁取りの色を黒にしています。
また、縁取りの位置を4方向(右上、左上、右下、左下)に指定しています。
このようにして、文字の縁取りができます。
●縁取りの太さや位置を変更する方法
縁取りの太さや位置を変更したい場合は、text-shadow
プロパティの値を調整します。
次のサンプルコードでは、縁取りの太さを3pxにしています。
サンプルコード:
h1 {
color: white;
text-shadow: 3px 3px 0 black, -3px 3px 0 black, 3px -3px 0 black, -3px -3px 0 black;
}
縁取りの位置も変更できます。
次のサンプルコードでは、縁取りの位置を右上と左下にだけ設定しています。
サンプルコード:
h1 {
color: white;
text-shadow: 3px 3px 0 black, -3px -3px 0 black;
}
このように、text-shadow
プロパティの値を調整することで、縁取りの太さや位置を自由に変更できます。
●複数の色で縁取りをする方法
縁取りを複数の色で行いたい場合は、text-shadow
プロパティに複数の色を指定します。
次のサンプルコードでは、赤と青の2色で縁取りをしています。
サンプルコード:
h1 {
color: white;
text-shadow: 2px 2px 0 red, -2px 2px 0 blue, 2px -2px 0 red, -2px -2px 0 blue;
}
このように、text-shadow
プロパティに複数の色を指定することで、縁取りを複数の色で行うことができます。
●縁取り文字の無限ループアニメーション
縁取り文字を無限ループさせるアニメーションを作る方法も紹介します。
次のサンプルコードでは、縁取りの色が順番に変わるアニメーションを無限ループさせています。
サンプルコード:
@keyframes color-change {
0% { text-shadow: 2px 2px 0 red; }
33% { text-shadow: 2px 2px 0 green; }
66% { text-shadow: 2px 2px 0 blue; }
100% { text-shadow: 2px 2px 0 red; }
}
h1 {
color: white;
animation: color-change 3s infinite;
}
@keyframes
ルールを使って、アニメーションのキーフレームを定義しています。
そして、animation
プロパティを使って、そのアニメーションを適用し、無限ループさせています。
●応用例: グラデーション縁取り
縁取りをグラデーションにする応用例も紹介します。
次のサンプルコードでは、縁取りがグラデーションになるようにしています。
サンプルコード:
h1 {
color: white;
background-image: linear-gradient(45deg, red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 2px 2px 0 rgba(255, 0, 0, 0.5), -2px 2px 0 rgba(0, 0, 255, 0.5), 2px -2px 0 rgba(255, 0, 0, 0.5), -2px -2px 0 rgba(0, 0, 255, 0.5);
}
このサンプルコードでは、background-image
プロパティを使って、グラデーションの背景を作成しています。
そして、-webkit-background-clip
プロパティと-webkit-text-fill-color
プロパティを使って、背景をテキストに適用します。
最後に、text-shadow
プロパティで半透明の縁取りを追加して、グラデーション縁取りを実現しています。
まとめ
この記事では、CSSを使って文字の縁取りを作る方法を初心者向けに詳しく解説しました。
サンプルコードや応用例を交えて説明しましたので、これを参考にしてあなたも縁取り文字を作成してみてください。
基本的な縁取りから複数の色での縁取り、無限ループアニメーション、グラデーション縁取りまで、様々な方法で縁取りを楽しめます。
この知識を活用して、ウェブページをより魅力的にデザインしてみてください。