公開日: 2023-09-04
タグ: CSS
著者: ダーシノ

::backdropにblur()をかけると見やすくなる

モーダル表示時に::backdropを黒い半透明にすることが多い。だが、そのままだと背景が見えてしまい、モーダルの内容が見づらくなることがある。

そこで、backdrop-filter: blur(2px)のように背景をぼかすことでよりダイアログの内容に集中できる。

<button
  type="button"
  popovertarget="dialog"
>
  dialog#showModa()
</button>

<dialog id="dialog" popover>
  <p>モーダルの内容</p>
  <button
    type="button"
    popovertarget="dialog"
    popovertargetaction="hide"
  >
    閉じる
  </button>
</dialog>

<style>
::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
</style>

::backdropにblur()をかけると見やすくなる

デモ