Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

透過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);
}
/* ~ 略 ~ */

参考

ymgd-a
opst
情報技術と社員力でお客様を成功に導く Make IT Your Success
https://www.opst.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした