Work Life Fun

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

作成:
カテゴリー: 業務効率化
タグ: HTML CSS

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

試してみたのは、以下のような背景画像にガラス板・すりガラスに文字を表記する方法。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プロパティの使い方を解説

【無料】毎月1回、効率的に人事労務の情報を入手しませんか?

  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 働き方の見直しといっても、具体的な実務でどう対応すれば良いかわからない
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

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

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

なお、あべ社労士事務所では、信頼できる社労士仲間を増やしていきたいという想いから、社労士が業務を行う上で役立つ情報提供も行っています。ご関心があればこちらをクリックしてご登録ください。