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

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

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

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

デモ

.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;
}

<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>