19
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-02-18

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

はじめに

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

00.PNG

  • 入手先:Ionicons

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

拡大縮小だけして表示

01.PNG

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

ポイント

  • background プロパティのショートハンドを使ってシンプルに書きます
  • background-positionbackground-sizeposition/size 形式で指定します
  • background-image プロパティを指定するクラスを分離して作成しておきます
/* ~ 略 ~ */
.tool-icon {
    width: 3em;
    height: 3em;
    display: inline-block;
    background: no-repeat center/70%;
}
.card {
    background-image: url(./img/card.png);
}
/* ~ 略 ~ */

ソースコード全文

ここをクリックしてソースコードを表示
<!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>

アイコンに色をつける

02.PNG

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

ポイント

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

ソースコード全文

ここをクリックしてソースコードを表示
<!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>

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

03.PNG

ポイント

  • 基本的に前のソースコードと同一です。
  • アイコンの background プロパティ に repeating-linear-gradient() 関数(直線的なグラデーション) を指定し ストライプ柄 なアイコンを作り出しています。
/* ~ 略 ~ */
.tool-icon {
    background: repeating-linear-gradient( 45deg, orange, orange 3px, red 3px, red 6px );
}
/* ~ 略 ~ */

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

04.PNG

ポイント

  • 基本的に前のソースコードと同一です。
  • アイコンの background プロパティ に 背景画像ファイルを指定することで その画像ファイルをくり抜いたアイコンとして表示されます。
/* ~ 略 ~ */
.tool-icon {
    background: url(./img/back.jpg);
}
/* ~ 略 ~ */

参考

19
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?