今回は、テキストやコンテンツに影をつけて、立体的に見せる方法を紹介します。

基本のコードは、以下になります。

<div class="container">
  <p class="text">今日の天気は、曇りです。</p>
</div>
.container {
  width: 560px;
  height: 200px;
  background-color: beige;
  border: 1px solid #333;
  display: flex;
  justify-content: center;
}

.text {
  font-size: 28px;
  align-self: center;
}

image2

テキストに影をつける

テキストに影をつける場合は、text-shadowで指定します。

.text {
  font-size: 28px;
  align-self: center;
  text-shadow: 3px 3px 6px #aaa;
}

ブラウザで確認すると、

image3

テキストに、影がつきました。

今回、text-shadowを 3px 3px 6px #aaa と設定しました。

設定方法は、左から順に

・テキストから x 軸方向へどのくらいずらすか ・テキストから y 軸方向へにどのくらいずらすか ・影をどのくらいぼかすか ・影の色

となります。

image4

もっとずらしてみたい場合は、text-shadow: 12px 12px 3px #aaa;とすると、

image5

となります。

『text-shadow ジェネレーター』と検索すると、画面でコードを簡単に生成できるサイトがあります。

コンテンツに影をつける

コンテンツに影をつける場合は、box-shadowで指定します。

.container {
  width: 560px;
  height: 200px;
  background-color: beige;
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  box-shadow: 6px 6px 6px #aaa;
}

ブラウザで確認すると、

image6

コンテンツに影がつきました。

今回、box-shadowを 6px 6px 6px #aaa と設定しました。

設定方法は、text-shadowと同様に

・テキストから x 軸方向へどのくらいずらすか ・テキストから y 軸方向へにどのくらいずらすか ・影をどのくらいぼかすか ・影の色

となります。

image7

『box-shadow ジェネレーター』と検索すると、画面でコードを簡単に生成できるサイトがあります。

ウェブサイトを立体的に見せたい場合は、ぜひ試してみてください。

ブログ一覧