はじめに
みなさんは、CSS Maskingを使いこなせていますか？
CSS Maskingは、デザイン性の高いLPや特設サイト等ではよく使うかもしれませんが、
Webプロダクトだとちゃんと触る機会が多くないプロパティだと思います。
そのため、この記事ではWebプロダクトでも使えるCSS Maskingを使ったUIを紹介しながら
CSS Maskingについて解説します。
CSS Maskingとは？
CSS Maskingとは、任意の形に要素を切り抜けるプロパティになります。
似たような任意の形に要素を切り抜けるclip-path プロパティとの違いは、SVGで任意の形に切り抜けるだけでなく、mask-imageで任意の画像や透明度に応じた切り抜きが行えることにあります。
この記事では、mask-imageにlinear-gradientでグラデーションを使用することで、フェードアウトするUIを実現していきます。
完成系
今回は、↓こんな感じにフェードアウトするUIを作っていきます。
音楽系のサイト/アプリで、歌詞が、右から左へ流れているようなものをイメージして作成しました。
See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen.
フェードアウトするUIをつくる
1. HTMLを実装する
早速、HTMLの実装からしていきましょう。
作りはとてもシンプルです。
container の中にアイコンと歌詞を入れている形になります。
yrics-containerに mask-imageプロパティを指定して、フェードアウトするUIを作っていきます。
<div class="container">
<span class="material-symbols-outlined">music_note</span>
<div class="lyrics-container">
<p class="lyrics">さぁ、怖くはない 不安はない 私の夢は みんなの願い 歌唄えば ココロ晴れる 大丈夫よ 私は最強〜♪</p>
</div>
</div>
2. CSSを実装する
次にCSSを作っていきます。
.containerは、スタイルをいい感じにするため、それっぽいデザインを当てています。
.lyrics-containerでは、mask-imageにlinear-gradient(to right, transparent 3%, black 30%, black 70%, transparent 97%);をあてることで、フェードアウトしているデザインにしています。
.lyricsでは、アニメーションを追加して、歌詞が左から右へ流れるようにアニメーションさせています。
.container {
aligin-items: center;
border: 1px solid #FFFFFF;
border-radius: 8px;
background-color: rgba(255, 255, 255, .7);
display: grid;
gap: 4px;
grid-template-columns: 24px minmax(0, 1fr);
padding: 6px 12px;
max-width: 300px;
width: 100%;
}
.lyrics-container {
color: #1C1B1F;
mask-image: linear-gradient(to right, transparent 3%, black 30%, black 70%, transparent 97%);
-webkit-mask-image: linear-gradient(to right, transparent 3%, black 30%, black 70%, transparent 97%);
position: relative;
white-space: nowrap;
}
.lyrics {
animation: 12s linear 1s infinite lyrics-anime;
margin: 0;
position: absolute;
width: fit-content;
font-weight: 500;
}
@keyframes lyrics-anime {
0% {
left: 150%;
}
100% {
left: -400%;
}
}
まとめ
この記事では、CSS Maskingを使って、フェードアウトするUIの作り方を解説しました。
UI上で、フェードイン/フェードアウトするだけで、モダンなデザインになることが多いです。
また、文章が多くなった時に、よく ...で省略しますが、CSS Maskingを使って省略させてもいいかもしれません。
最後に、普段はHTMLやCSS、アクセシビリティ、デザインといったところを中心に
Qiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。
また、「フロントエンドxデザイン」をテーマにDevトークを募集しているので、
興味がある方は、ぜひお話しましょう。
Qiitaの記事の内容でもアウトプットに関する内容でも構いません。