プログラミング

【CSS】枠線の上下左右に影(ぼかし)を表示させてカードを作成する方法

上下左右に影(ぼかし)を表示させて、カードを挿入した感じにしたいけど、やり方が分からないよ…。

今回はそんな悩みを解決するコードの書き方を紹介します。

この記事で作れるもの

この記事では、「ねこ」を書いたdiv要素の上下左右に影(ぼかし)を表示させて、カードを挿入した感じにしていきます。

枠線の左右上下に影(ぼかし)を表示する例

シンプルなコードで作成しているので、ご自身のサイトでも加工してお使いください。

コードの紹介

まずはHTMLから。いつもの超シンプルな記述です。

続いてCSS。

任意で変える項目が多いので、お好みで調整してください。

コードの解説

今回はそこでまで難しくないので、成分の分解はしません。

ポイントである[box-shadow]だけ解説します。

box-shadow

ボックスに影を表示させるプロパテイです。

今回は[box-shadow]の中に、3つの値を記述しています。

1つ目の値:上下方向の影

2つ目の値:左右方向の影

3つ目の値:ぼかしの距離

今回は、1・2つ目の値を0にすることで影の実体を非表示にし、3つ目の値を0以上にしてぼかしを表示させました

そうすることで、上下左右に影(ぼかし)を表示させることができます。

お役立ちメモ

borderは無くても良い

[border]がなくても、[box-shadow]だけで枠線(境界線)があるように見えます

むしろ、[border: solid;]だと線が濃く見えるので、使わないほうがお洒落かもしれない。

子要素を中央に配置したい

上下左右中央に配置する場合は、親要素のCSSに次のとおり書きます。

左右にだけ中央配置する場合は、上記から「justify-content: center;]を削除するか、上記4行を一切使わずに[margin:auto;]とだけ記述するかでokです。

また、上下にだけ中央配置する場合は、上記から「align-items: center;]を削除すればokです。

まとめ

制作模写をしていると、上下左右方向に影(ぼかし)を使った表現を目にすることがあります。

機会があればぜひ使ってみて下さいね。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です