Elementorですりガラス半透明効果
最近よく見る曇ったガラス風半透明なボタンとか
空中に浮かぶようなUI表現が増えてきたように思えますが、そんな表現の中でも曇ったガラス風のボタンをよく見るようになった気がします。
筆者が好んで使っているElementorページビルダーはドラッグ＆ドロップで様々なデザインや機能をページに配置することが可能ですが、ほんのすこしコードを追加するだけでさらに表現の幅が広がります。
今回はそのちょいコードで作ることができる半透明曇りガラス風ボタンの作り方です。
作例は以下の通り、背景にイメージが固定されていて、手前を通り過ぎるボタンの領域だけ背景がぼけて曇りガラス風に半透明になるボタンを作成してみます。
Elementorで透明ボタンを作る！
コンテナをONにする
Elementor 3.10.0でついにRC、リリースキャンディデイトつまりリリース候補・直前までになったコンテナ機能をオンにしました。
別にコンテナでなくても良いのですが、時代の潮流はFlexbox、ここはオンにして少し慣れておいた方がよいです。
コンテナは何回でも入れ子にできる
コンテナを一つ用意してその中にもう一つコンテナを入れます。
このコンテナの位置とサイズがボタンの位置とサイズになる考え方です。
この方法をとることで領域の制御を簡単に行うことができます。
今回は以下のようなコンテナ構造を作成します。
外側のコンテナのレイアウト設定
コンテナを選択してレイアウトタブの内容を設定します。
外側のコンテンナの高さを600ピクセルを指定しました。
この600ピクセルの高さの中に背景イメージを配置します。
さらにこのコンテナの中に入れる要素を縦方向に中央に配置されるような指定も行います。
外側のコンテナのスタイル設定
コンテナを選択してスタイルタブの背景を設定します。
背景タイプは筆のアイコンのクラシック、画像を指定します。
- 画像サイズ：フル
- 位置：デフォルト
- 添付：固定
- 繰り返し：繰り返しなし
- Display Size：カバー
添付というのは誤訳というか、あまり良い翻訳ではなくて貼り付けとかいう意味で、画像の位置を固定するかしないかの設定です。
Display Sizeは未翻訳ですが、これは画像の表示方法になります。
上記の設定を行うことで、ボックス領域に固定された画像背景が指定されます。
内側のコンテナのレイアウト設定
内側のコンテナを選択して幅を600ピクセルに指定します。
このコンテナはテキストウィジェットを入れるための領域なので設定はこれだけです。
テキストウィジェットを内側のコンテナの中に配置する
テキストウィジェットのコンテンツはボタンの名前をテキストで入力して、大きさや色を調節します。
上の例では”ともろうが赤ん坊のころ”という文字を入力して大きさを24pt、色を白にして仮のハイパーリンク”#”を指定しました。
テキストウィジェットの高度な設定
続いて高度な設定タブで枠線を作成します。
枠線のセクションで３ピクセル、枠線の丸みを10、色を白にしました。
枠線の設定はマウスオーバー時も異なった指定ができるので、マウスオーバーのときに白のシャドウが表示されるような設定にしました。
テキストウィジェットの高度な設定 カスタムCSS
高度な設定のカスタムCSSの項目に以下のようなスタイルシートを入力しました。
selector {backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);}selector a{text-decoration: none;}
selectorは選択しているウィジェットを指しています。
back-drop-filter:blur(30px);
で、ボタンが背景と重なったとき、背景が30pxの度合いでぼかされて表示される指定になります。
-webkit-backdrop-filter:blur(30px);
はスマホ用のCSSです。
selector a に対しする指定はハイパーリンクをもった文字がマウスオーバーされたときに下線などが表示されないようにする処理です。
まとめ
ノーコードではなくて ちょいコードでいくと思った以上のデザインをすることができると思います。
Elementorはウィジェットという形態でボタンやらスライダーで各値をコーディングの知識なしに入力できる環境を提供してくれますが、裏側で起きているのはコーディングで値を入力しているのとまったく同じ。
それなら簡単にできる部分はスライダーとかボタンとかで簡単に指定して、それ以上になんとかしたいところは少しコーディングめいたことをすれば、より望んでいる結果を得ることができるジャン、という考え方がちょいコードの考え方です。
-
Elementorですりガラス半透明効果の関連リンク
