※当サイトはリンクに広告ページが含まれている場合があります
久しぶりにブログのデザインを変更しました。
試してみたのは、以下のような背景画像にガラス板・すりガラスに文字を表記する方法。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プロパティの使い方を解説
【無料】効率的に人事労務の情報を入手しませんか？
- 毎年のように改正される労働法令への対応に頭を悩ませている
- 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない
といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックに関するメールマガジンを「無料」で配信しています。
過去の配信分は公開しません。
情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。