cssで背景が透けて見えるいい感じのカードを作ろう

背景が透けて見えるいい感じのカード とは

引用 from dribbble

背景が透けて見えています。

実装しましょう

とりあえず、原型を作る

<div class="container">
  <div class="card">ごはん</div>
  <div class="card">パン</div>
  <div class="card">たこやき</div>
  <div class="card">てばさき</div>
  <div class="card">sample</div>
  <div class="card">sample</div>
  <div class="card">sample</div>
  <div class="card">sample</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 50px;
  width: 400px;
  height: 400px;
  background: -webkit-linear-gradient(to right, #ef8e38, #108dc7);
　background: linear-gradient(to right, #ef8e38, #108dc7);
}
.container .card {
  margin-left: 25px;
  width: 100px;
  height: 100px;
  color: white;
  background:gray;
}

背景のグラデーションは、uiGradientsを使わせていただきました。
今日も、きれいだね。

「背景だけ」透けさせるために

現状だと、背景だけを透けさせるのは難しくなっています。というのも、今のcardクラスにopacity:0.5を加えたりするとわかるのですが、

背景以外（ここでは文字）も透明になってしまうからです。
背景だけ透けさせるためには、中身と背景を別の要素にしなければいけません。
そこで、疑似要素::beforeを使うことにします。(::afterでもよい)
htmlはそのままで、cssを以下のように変更します。

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 50px;
  width: 400px;
  height: 400px;
  background: -webkit-linear-gradient(to right, #ef8e38, #108dc7);
  background: linear-gradient(to right, #ef8e38, #108dc7);
}
.container .card {
  /*↓増えた*/
  position: relative;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  color: white;
  /*↓増えた*/
  z-index: 0;
}
  /*↓たくさん増えた*/
.container .card::before {
  z-index: -1;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gray;
}

こうすることで、背景だけに透明度を設定することができるようになりました。
positionやz-indexは、疑似要素の大きさと位置を指定するために必要なものです。

最終形

あとは、背景の色や透明度を設定して完成です。

完成したコードは以下のとおりになります。

See the Pen 背景が透けて見える枠 on CodePen.

背景色を変えてみたり、透明度を変えて調整すれば、お望みどおりになるのでは。

おまけ

codepenにも書いてあるが、
opacityの代わりにfilter:blur(100px);を使っても同じ見た目になる。
その時のcssは以下の通り。

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 50px;
  width: 400px;
  height: 400px;
  background: -webkit-linear-gradient(to right, #ef8e38, #108dc7);
  background: linear-gradient(to right, #ef8e38, #108dc7);
}
.container .card {
  position: relative;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  color: white;
  z-index: 0;
  overflow:hidden;
}
.container .card::before {
  z-index: -1;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity:0.1;
  filter: blur(100px);
}

cssおもろい〜〜〜

発展編

コメントにて、
「背景透過するだけなら、rgbaで色を指定すればできるよ！」
といった主旨のコメントをいただきました。

そうだった・・・
わざわざ疑似要素使わなくても、それで解決できますね・・・。

しかし、疑似要素を使わないと実現できないこともあります。
背景画像の透過です。

　cssを変更するだけで、簡単にできます。具体的には、上で上げたcssの.card:before:の一部を、以下の通りに変更します。

background: url(<表示したい画像のURL>);
background-size:cover;

こうするだけで、簡単に背景画像を透過させることができます。
（opacityは自由に調節してください。）

え、イメージがつかない？
つまりこういうことだァ！！

See the Pen 背景画像が透けて見える枠on CodePen.

みなさんも、美味しいたこ焼きを背景にしてみては？