※当サイトはリンクに広告ページが含まれている場合があります
久しぶりにブログのデザインを変更しました。
試してみたのは、以下のような背景画像にガラス板・すりガラスに文字を表記する方法。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回、無料・本音で回答します。
ご質問・ご相談は、登録後に届くメールから送っていただけます。費用は一切かかりません。「お悩み相談室」というクローズドな場だからこそ、踏み込んだ内容の質問にも回答できます。
これまでに、こんなご質問・ご相談に回答してきました。
- コンサル(3号業務)を主力業務にするには、どうすれば良いか？
- どのようにして顧問料を上げれば良いか？
- 営業が苦手で、新規の顧客獲得ができない
- 業務をどう絞り込めば良いか？
- 一人社労士のままで良いのか、人を雇うべきか？
- 苦手・相性の悪い顧問先と、どう付き合うか？
- 生成AIの時代、社労士は今後どう生き残るか？
なぜ、無料で同業の社労士からの相談に乗るのか？
それは「本当に顧客のために活動できる社労士仲間を増やしたい」からです。
私自身、社労士という資格に誇りを持っています。企業からの社労士に対する不満をよく聞きますし、「社労士なんて役に立たない」と思われることは、正直悔しいです。
- 信頼される・信頼できる社労士の仲間を増やしていきたい
そんな想いから、少しでも社労士業界全体のレベルアップに貢献できればと考えています。
登録は無料・月1回配信・配信解除いつでも可能
※ 登録後、本人確認のメールをお送りします。届かない場合は迷惑メールフォルダもご確認ください。