フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

mask-imageで両端に透過グラデーションのマスクをかける

スマホのナビゲーションバーのような水平方向にスクロールできる要素で、それがスクロールできることを表すために、両端に透過グラデーションをのマスクをかけるデザインがよくあります。

両端にその背景色から透過のグラデーションの要素を置いて疑似的に表現する方法がわりと一般的ですが、これをmask-imageを使ってちゃんと両端を透過グラーデーションすることができます。

mask-imageを使った手法は、IE11では使えませんが、両端がちゃんと透過されるため、背景に画像や動画といったケースでもちゃんと表現できます。

デモ

css
.Navbar {
    background: blue;
}
.Navbar__mask {
    -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent);
    mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent);
}
.Navbar__scroll {
    overflow-x: scroll;
    white-space: nowrap;
}
.Navbar__scroll a {
    display: inline-block;
    padding: .5em .5em;
    text-decoration: none;
    color: #fff;
}
html
<div class="Navbar">
    <div class="Navbar__mask">
        <div class="Navbar__scroll">
            <a href="#">アイテム1</a>
            <a href="#">アイテム2</a>
            <a href="#">アイテム3</a>
            <a href="#">アイテム4</a>
            <a href="#">アイテム5</a>
            <a href="#">アイテム6</a>
            <a href="#">アイテム8</a>
            <a href="#">アイテム9</a>
        </div>
    </div>
</div>
[紹介元] CSSタグが付けられた新着記事 – Qiita mask-imageで両端に透過グラデーションのマスクをかける

コメント

記事に戻る

コメントを残す