透過PNGを良い感じのアイコンとして使うためのCSS

透過PNGを良い感じのアイコンとして使うためのCSS


## はじめに
* こんな感じの 透過PNG を Webページ上のアイコンにしたい・・・ということはよくあるかと思います。

![00.PNG](https://qiita-image-store.s3.amazonaws.com/0/216852/078d43b8-92d1-838b-7d30-6dcdeb3ee7f5.png)

* 入手先：[Ionicons](https://ionicons.com/)

* シンプルにアイコン表示・・・だけでなく、一工夫加えて表示させる方法をまとめてみます。



## 拡大縮小だけして表示

![01.PNG](https://qiita-image-store.s3.amazonaws.com/0/216852/7845d913-d13a-d26f-7953-8f7549637094.png)

* まずはシンプルに基本編です。調べれば他にもいろいろとやり方はありそうです。

### ポイント

* `background` プロパティのショートハンドを使ってシンプルに書きます
* `background-position` と `background-size` は `position/size` 形式で指定します
* `background-image` プロパティを指定するクラスを分離して作成しておきます

```css
/* ～ 略 ～ */
.tool-icon {
    width: 3em;
    height: 3em;
    display: inline-block;
    background: no-repeat center/70%;
}
.card {
    background-image: url(./img/card.png);
}
/* ～ 略 ～ */
```

### ソースコード全文
<details>
<summary><b>ここをクリックしてソースコードを表示</b></summary>
<div>

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>PNG ICON CASE 1</title>
</head>

<body>
    <div class="tool-bar">
        <div class="tool-icon card"></div>
        <div class="tool-icon camera"></div>
        <div class="tool-icon calendar"></div>
        <div class="tool-icon calculator"></div>
    </div>

    <style>
        .tool-bar {
            width: 100%;
            height: 3em;
            background: #eee;
        }
        .tool-icon {
            width: 3em;
            height: 3em;
            display: inline-block;
            background: no-repeat center/70%;
        }
        .card {
            background-image: url(./img/card.png);
        }
        .camera {
            background-image: url(./img/camera.png);
        }
        .calendar {
            background-image: url(./img/calendar.png);
        }
        .calculator {
            background-image: url(./img/calculator.png);
        }
    </style>

</body>

</html>
```

</div>

</details>



## アイコンに色をつける

![02.PNG](https://qiita-image-store.s3.amazonaws.com/0/216852/4df92e30-382f-df72-5164-6f889872d533.png)

* 透過PNG の 非透過部分に、好きな色を着けることができます。

### ポイント

* `mask` プロパティを `background` プロパティの代わりに使います。
* `mask-image` プロパティでアイコンファイルを指定します。
* `background-color` プロパティで着色したい色を指定します。
* つまり **透過PNG の 「透過」部分で、単色の背景(background) を隠して(maskして) います。**
    * その結果、隠されていない部分（非透過部分）だけが表示されます。
* 2019/02 現在 **Chrome 等での動作には `-webkit-` プレフィクスが必要** です。

```css
/* ～ 略 ～ */
.tool-icon {
    width: 3em;
    height: 3em;
    display: inline-block;
    mask: no-repeat center/70%;
    -webkit-mask: no-repeat center/70%;
    background: darkorange;
}
.card {
    mask-image: url(./img/card.png);
    -webkit-mask-image: url(./img/card.png);
}
/* ～ 略 ～ */
```
### ソースコード全文

<details>
<summary><b>ここをクリックしてソースコードを表示</b></summary>
<div>

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>PNG ICON CASE 2</title>
</head>

<body>
    <div class="tool-bar">
        <div class="tool-icon card"></div>
        <div class="tool-icon camera"></div>
        <div class="tool-icon calendar"></div>
        <div class="tool-icon calculator"></div>
    </div>

    <style>
        .tool-bar {
            width: 100%;
            height: 3em;
            background: #eee;
        }
        .tool-icon {
            width: 3em;
            height: 3em;
            display: inline-block;
            mask: no-repeat center/70%;
            -webkit-mask: no-repeat center/70%;
            background: darkorange;
        }
        .card {
            mask-image: url(./img/card.png);
            -webkit-mask-image: url(./img/card.png);
        }
        .camera {
            mask-image: url(./img/camera.png);
            -webkit-mask-image: url(./img/camera.png);
        }
        .calendar {
            mask-image: url(./img/calendar.png);
            -webkit-mask-image: url(./img/calendar.png);
        }
        .calculator {
            mask-image: url(./img/calculator.png);
            -webkit-mask-image: url(./img/calculator.png);
        }
    </style>

</body>

</html>
```

</div>

</details>




## ストライプ柄のアイコンを作る

![03.PNG](https://qiita-image-store.s3.amazonaws.com/0/216852/326c846a-c50a-83a8-a4cb-57a1c386e8b4.png)

### ポイント
* 基本的に前のソースコードと同一です。
* アイコンの `background` プロパティ に **repeating-linear-gradient() 関数（直線的なグラデーション）** を指定し **ストライプ柄** なアイコンを作り出しています。

```css
/* ～ 略 ～ */
.tool-icon {
    background: repeating-linear-gradient( 45deg, orange, orange 3px, red 3px, red 6px );
}
/* ～ 略 ～ */
```




## 背景に写真を指定してみる

![04.PNG](https://qiita-image-store.s3.amazonaws.com/0/216852/ccea9da7-b8f8-02fa-8bc6-f0d3bb831cf6.png)


### ポイント
* 基本的に前のソースコードと同一です。
* アイコンの `background` プロパティ に 背景画像ファイルを指定することで その画像ファイルをくり抜いたアイコンとして表示されます。

```css
/* ～ 略 ～ */
.tool-icon {
    background: url(./img/back.jpg);
}
/* ～ 略 ～ */
```


## 参考
* [MDN mask-image](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image)
* [Stripes in CSS | CSS-Tricks](https://css-tricks.com/stripes-css/#article-header-id-0)