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

## 背景が透けて見えるいい感じのカード とは
![画像](https://cdn.dribbble.com/users/282234/screenshots/1145654/attachments/147835/full_view.png)
[引用 from dribbble](https://dribbble.com/shots/1145654-Activity-Tracking-App-Concept-and-1-Dribbble-invite/attachments/147835)

背景が透けて見えています。
## 実装しましょう
### とりあえず、原型を作る
<img width="503" alt="スクリーンショット 2018-04-25 13.23.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/201590/f0b10195-5ab5-adda-123c-62a01f0fbead.png">

```html
<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>
```

```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 {
  margin-left: 25px;
  width: 100px;
  height: 100px;
  color: white;
  background:gray;
}

```
背景のグラデーションは、[uiGradients](https://uigradients.com/#KingYna)を使わせていただきました。
今日も、きれいだね。

### 「背景だけ」透けさせるために
現状だと、背景だけを透けさせるのは難しくなっています。というのも、今のcardクラスに```opacity:0.5```を加えたりするとわかるのですが、
<img width="504" alt="スクリーンショット 2018-04-25 13.26.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/201590/e1f1cd40-7bd5-b8be-c9ba-e59289dfa973.png">

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

```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は、疑似要素の大きさと位置を指定するために必要なものです。

### 最終形
あとは、背景の色や透明度を設定して完成です。
<img width="504" alt="スクリーンショット 2018-04-25 13.41.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/201590/00a8d017-7d25-54fc-051e-2cff16424655.png">

完成したコードは以下のとおりになります。
<p data-height="350" data-theme-id="dark" data-slug-hash="BxdmRg" data-default-tab="css,result" data-user="chicchekura" data-embed-version="2" data-pen-title="背景が透けて見える枠" class="codepen">See the Pen <a href="https://codepen.io/chicchekura/pen/BxdmRg/">背景が透けて見える枠</a> on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
背景色を変えてみたり、透明度を変えて調整すれば、お望みどおりになるのでは。

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

```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:```の一部を、以下の通りに変更します。

```css
background: url(<表示したい画像のURL>);
background-size:cover;
```
こうするだけで、簡単に背景画像を透過させることができます。
（opacityは自由に調節してください。）

え、イメージがつかない？
つまりこういうことだァ！！
<p data-height="350" data-theme-id="dark" data-slug-hash="WJwVxw" data-default-tab="css,result" data-user="chicchekura" data-embed-version="2" data-pen-title="背景画像が透けて見える枠" class="codepen">See the Pen <a href="https://codepen.io/chicchekura/pen/WJwVxw/">背景画像が透けて見える枠</a>on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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