テキストに影を付ける方法
テキストに影を付けるには、text-shadowを利用しましょう。
サンプルコード
3つの長さは、1つ目が水平方向、2つ目が垂直方向にずらす距離です。3つ目はぼかす具合(広がる距離)です。
p {
text-shadow: 5px 5px 5px red ;
}デモ
1つの影
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 5px 5px red ;
}
</style>
</head>
<body>
<p>SYNCER</p>
</body>
</html>複数の影
コンマ(,)で区切ると、複数の影を指定できます。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 5px 5px red, -5px -5px 5px blue ;
}
</style>
</head>
<body>
<p>SYNCER</p>
</body>
</html>関連記事
- ホバーした時に透過させる方法
- 画像などを透過させるには、opacityプロパティを利用します。
- dl要素を横並びにする方法
- dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。
- 三角形を作る方法
- CSSで三角形を作るには、横幅、高さが0の要素に幅の厚い枠線を付けます。
- ホバーした時に回転させる方法
- 画像などを回転させるには、transformプロパティを利用します。
- リンクの下線を消す方法
- リンクテキストの下線を消すには、text-decorationプロパティにnoneを指定します。
- リンク色をゆっくりと変える方法
- リンク色をゆっくりと変えるには、transitionプロパティを利用します。