【CSS/MASK】ロゴマークをマスクしてみた

ウェブデザインにおいて、ロゴマークを「マスク」することで、より洗練された演出が可能になります。今回は、CSSの mask を使用して、ロゴマークにマスク効果を適用する方法を試してみました。

マスクとは？

マスクとは、要素の一部を透明にしたり、グラデーションをかけたりして、デザインに変化をつける技法です。CSSでは mask プロパティを使って、画像やグラデーションを活用したマスキングが可能になります。

ロゴマークをマスクする方法

以下のコードを使って、ロゴマークをマスクしてみました。

<style>
.logo_mask {
    width: 500px;
    height: 110px;
    background: url('logo.png') no-repeat center / cover;
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
</style>
<div class="logo_mask"></div>

実際に試してみた結果

このコードを適用すると、ロゴの中央部分はくっきりと表示され、外側に向かうにつれてフェードアウトする効果が得られました。通常の clip-path では不可能な、なめらかなグラデーションのマスキングができるのが特徴です。

マスク（mask）はロゴマークのフェードアウト以外にも、さまざまな用途に活用できます。以下に代表的な使い道を紹介します。

1. CSSグラデーションを使う

mask-image に 線形グラデーション や 放射状グラデーション を指定することで、マスク効果を適用できます。

🔹 例：フェードアウトエフェクト

<div class="fade-mask">
    <p>このテキストがフェードアウトします。</p>
</div>
<style type="text/css">
.fade-mask {
    width: 300px;
    height: 200px;
    background: coral;
    mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}
</style>

📌 効果: 要素が右端に向かって徐々に透明になる。

2. 多角形マスク

clip-path を使うことで、画像を使わずに 三角形・星・ハートなどの形 にくり抜くこともできます。

🔹 例：三角形のクリップ

<div class="triangle">
    <p>三角形に切り抜かれます</p>
</div>
<style type="text/css">
.triangle {
    width: 200px;
    height: 200px;
    background: dodgerblue;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle p {
    position: relative;
    top: 50%;
}
</style>

📌 効果: 要素が三角形の形で表示される。

3. SVGを使ったマスク

画像を使わずに、SVGの形状をマスクとして適用 することも可能です。

🔹 例：SVGをマスクに適用

.svg-mask {
    width: 300px;
    height: 300px;
    background: coral;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill=\"white\"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill=\"white\"/></svg>');
}

📌 効果: 要素が円形で表示される。（SVGの circle をマスクとして利用）

4. アニメーションで動的にマスク

CSSアニメーションと組み合わせれば、動的なマスクエフェクトも作れます。

🔹 例：グラデーションマスクが広がっていくエフェクト

    <div class="mask-container">
        <div class="animated-mask">
            <p>左右に動くマスクエフェクト</p>
        </div>
    </div>

<style type="text/css">
/* コンテナのスタイル */
.mask-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: #317fc8;
}

.animated-mask {
    width: 400px;
    height: 200px;
    background-color: #2a9d8f; /* ベース色 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    text-align: center;
    overflow: hidden;
    position: relative;
    animation: wave-mask .5s linear infinite;
    animation-delay: 1s;
}

/* 左右に動くマスクのアニメーション */
@keyframes wave-mask {
    0% {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }
    10% {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
    }
    25% {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    }
    50% {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    }
    75% {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 100%);
    }
    90% {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
    }
    100% {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 0%);
    }
}

</style>

@keyframes wave-mask の詳細

この @keyframes アニメーションでは、マスクが左に移動する効果を作り出しています。mask-image を linear-gradient で定義し、マスクの表示範囲が動くようにしています。

• 0%: マスクの範囲は 0% から始まり、全体が黒く表示されます（つまり、マスクが適用されていない状態）。
• 10%〜100%: mask-image の黒い部分の幅が時間とともに変化します。マスクが左に移動し、黒い部分が右から左にスライドする効果を与えています。これにより、テキストが見え隠れしながら、マスクが動いていることがわかります。

animation プロパティ:

• wave-mask アニメーションを 0.5秒 の長さで1回実行します（1）。
• アニメーション終了後、pause-animation を使って 3秒間停止 する時間を作ります（3s）。これにより、アニメーションが終わった後に停止します。

animation-fill-mode: forwards;:

• アニメーションが終了した後も最後の状態を保持するために forwards を設定します。これにより、アニメーションが停止した後、最終状態が維持されます。

@keyframes pause-animation:

• 停止用の keyframes アニメーションを追加し、visibility を維持して停止させます。実際には、何も変化を加えずに3秒間そのまま停止します。

効果の流れ

1. 初めに、テキストが全て表示されます（mask-image が全体を覆っていないため）。
2. wave-mask アニメーションが開始されると、マスクが右から左にスライドし、テキストが順番に隠れていきます。
3. アニメーションが終了し、再度最初から繰り返されます。

このコードにより、左に動くマスクエフェクトが作成され、視覚的に面白い動きとインタラクティブな感覚をユーザーに提供します。

結論

✅ 画像なしでもマスクは使える！
✅ CSSのグラデーションやSVGを利用すれば、独自のマスキングエフェクトが作れる！
✅ アニメーションを組み合わせれば、動的なデザインも可能！

mask の強力な機能を活かして、ユニークなデザインを作ってみてください！

まとめ

mask を使えば、次のようなユニークな効果が作れます： ✅ テキストに画像やグラデーションを適用
✅ 画像の特定部分を透明化
✅ ホバー時に見せる・隠す
✅ SVGと組み合わせてカスタムシェイプ
✅ アニメーションを加えて動的に変化

デザインの幅が広がるので、ぜひ活用してみてください！