Work Life Fun

仕事も人生も楽しむ社労士

CSS1行でガラス板・すりガラスを表現できるbackdrop-filter

※当サイトはリンクに広告ページが含まれている場合があります

久しぶりにブログのデザインを変更しました。

試してみたのは、以下のような背景画像にガラス板・すりガラスに文字を表記する方法。iOSの通知などで利用されています。

画像ソフトを使えばできますが、CSSで可能ならはるかに手軽です。

デモ画面

CSSで1行、backdrop-filterを利用するだけです。以下はデモ画面。

See the Pen css-backdrop-filter by abesatoshi (@abesatoshi) on CodePen.

ガラス板・すりガラスを表現するポイント

ガラス板・すりガラスを表現しているのは、CSSの

backdrop-filter: blur(20px);

という部分だけです。あとは、見栄え、というより個人的趣味により、以下のようにborderで境界線を設定しています。

border: 1px solid rgba(255, 255, 255, 0.4);
border-right-color: rgba(255, 255, 255, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;

参考:[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説

【無料】効率的に人事労務の情報を入手しませんか?
  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックに関するメールマガジンを「無料」で配信しています。

過去の配信分は公開しません。

情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。


up_line