シンプルなトランスルーセント(半透明の背景)を作ってみる

トランスルーセント

トランスルーセント(translucent)は、半透明にぼかした画像の上にコンテンツを配置するUIです。コンテンツを浮き上がらせて、見た目に映えるUIですし、ただ背景画像の上にコンテンツを配置するよりも、ぼかしのあった方がより洗練された気がします。作るのはすごく簡単です。

HTML

HTMLはぼかしを入れる画像とその上に表示させるコンテンツを並べています。

CSS

画像の上にコンテンツを表示させるのは、おなじみの親要素で「position: relative;」を定義し、子要素のコンテンツに「position: absolute;」を指定して相対位置を調整する方法で配置します。コンテンツはz-indexプロパティで浮かせます。

トランスルーセントのポイントは「filter: blur(5px);」、これだけです。blurの中の5pxの数字が大きいほど、ぼかしの度合が強くなります。

filterプロパティは要素(主にimg要素)に視覚要素を適用するためのプロパティで、ぼかしの他に明るさやコントラスト、グレースケールやセピア調などあります。

シンプルですが作ってみたかったUIだったのでやってみました。

広告
  • LINEで送る