グラス モーヒズム デザインで 飾るサイト ➡css を手軽に編集してご利用できます。Glassmorphism

Glass morphism Design css ：デザイン
Glass morphism Design
2022.12.01
記事内に広告が含まれています。

グラス モーヒズム すりガラスのパネル デザイン
　あなたの感覚で、使ってみてください。
設定した内容で「Codeを生成」が機能し、利用できます。

(このページで利用しているキャプチャ画像は、
制作経過当時のもので、完成時のものとは異なる場合があります。
ご了承願います。)

Thank you for reading this post, don't forget to subscribe!
ここをクリックして 操作画面に進む
Glass-morphism_Design
Glass-morphism Design

※.操作画面判別（例えば アイコンが動いています)では、実際に操作できます。
初期画面以降は、キャプチャ画像です。操作できません。

各所に設けている操作画面に▼ ▲で直ぐに操作画面にジャンプします。

何も操作せず
「 Codeを生成」ボタンだけクリックすると、
デフォルトの.htmlと.cssが出力されます。
この場合でも、そのままコピペでご利用いただけます。

操作画面に▼進む

PR広告
PR広告

操作できます コンテンツ　

操作・生成・コピー・利用

お好みのデザインに操作・生成・Copy・利用できます

PC操作「ご案内」　部分を参照願います。

ご案内

各スライダで設定：Glass Morphism
　 1.要素の不透明度の指定
　 2.ガウスぼかしの指定
　 3.境界線の線の太さの指定
　 4.要素の四隅の角丸の指定
　 または クリックで背景の入替
　背景に合ったGlassカラーを指定ください
　更に、あなたの背景をURLで指定できます
「Codeを生成」で、スケルトンSource！
　……………　THAKS for watching.


操作画面　 . スマホおよび小さめのPadでは操作に適しまません!!!

操作案内
1.不透明度設定
– 08 +
2.ぼかし指定
– 08 +
3.境界線の太さ
– 08 +
4.四隅の角丸
– 08 +
5.カラー
選択/Hex入力
6.背景画像指定
(Code 無関係)

飾り画

｜


ご案内
Codeを生成

出力画面：縦スクロールバーが表示された場合はスクロール後Copy操作

HTML
CSS
THANKS for using 操作画面に戻る　

操作画面に▲戻る

PR広告

初期画面（キャプチャ画像）

  • 背景画像はランダムに変わる様に設定しています。
  • 操作パネル（スライダ、カラー選択）はデフォルト設定です(変更できます)
グラス モーフィズム
  • この状態(なにもしないとき)では、未だ Code生成されていません。

操作画面に▲戻る

操作画面に▲戻る

Glassが変化したところです[スライダ操作]

＜ ＞　クリックで（背景が入れ替わり）

グラス モーフィズム

スライダ操作・選択(デフォルト)

  • 不透明度　　：0.212 ➡ background-color: rgba(19,236,84, 0.212);
  • ぼかし指定　：2px ➡ backdrop-filter: blur(2px);
  • 境界線の太さ：7px ➡ border: 7px rgba(255,255,255,0.4) solid;
  • 四隅の角丸　：157px ➡ border-radius: 157px;
  • カラー選択　：#13EC54は選択カラーから自動変換
    ➡ background-color: rgba(19,236,84, 0.212);

カラー部分のクリックで、カラー選択のポップアップが開きます。
マウスなどでカーソルを動かしたり、直接R,G,Bの値を入力したりしてGlass色を選びます。

以上の調整結果です。

グラス モーフィズム

操作画面に▲戻る

⚙ Codeを生成

「Codeを生成」ボタンをクリック
htmlとcssのコードが生成されました。

各「クリップボードにCopy」ボタンのクリックで、
それぞれ、クッリプボードにコピーされます。
※注．続けて行うと、後からの「クリップボードにCopy」の分が有効になります。

操作画面に▲戻る

エディタにペースト

Windowsでは、「Ctrl」＋「V」操作

Class名 id名

  • エディタに貼り付けて
  • 少し加工
    • class名を変更➡glass_container_x (2か所：html部分とcss部分）理由は、複数個生成する場合（クラスを分ける必要から）別名に
  • <style>タグで挟み（インライン.cssとして）
  • .htmlファイルとして保存（glass_container_x.html）
glass container
glass_container.html　グラス モーフィズム

上記キャプチャの後、JavaScliptを少し変更して、以下の様にしました。

  • Class名とid名を、都度編集出力にしました。
    • class名の場合、
      「glass_container_J2022_12_5_165740」の様に、
      年月日時分秒別に生成時都度変更(JavaScriptによる動的命名方式に)する様に！

      これでコピペを繰り返しても都度ペースト先でクラス名とid名の変更が不要となりました。（利便性を高めました。）

      (例えば2022/12/05 16:57:40生成では以下の様に、classとidが)

      ＜div class=”glass_container_J2022_12_5_165740” id=”glass2022_12_5_165740“>　及び、

      .glass_container_J2022_12_5_165740 {　の様になります。

      （時分秒は細かく編集していませんので、6桁表示にならない場合もあります。ご了承ください

サイトで利用

例えばWordPressの、カスタムHTMLブロックに
glass_container_x.html を貼り付けると、以下の様な表現ができます。

後は、

  • 複数個（width:やheight:を変更したり）重ねて表現したり・・・
    • このコンテンツの様に
      • 画像や、アイコンや、文字を配置したりして
  • デザインに利用できます。

操作画面に▲戻る

使用例

一例です[Glass Morphism]

※. 下の例の、
「ここから」はLinkを貼っていません(クリックしても動作しません)

最初の要素（１）
２番目の要素（２）説明：
● 具体的に（１）
● 具体的に（２）
● ・・・・・・・・・・・・・・・
３番目の要素（３）
・・・・・・・・・・・・・・・・・・・・
続きは、 ここから クリック！

GlassMorphism & Aurora Design


abc

操作画面に▲戻る

Topページも！

実サイトのTopページ Cube(正六面体)もGlass Morphism Designに変更しました。
回転しているCube面のアイコンと文字のクリックで該当ページにジャンプします。

.bizHome
トップページ

ToolBox
道具箱

Operation
運用

Plugin
プラグイン

Security
セキュリティ

.info
スマホ最適

操作画面に▲戻る

スマホで操作

Macは、持っていないので試せていませんが、iPhone・iPadでは動作しましたので問題は無いかと
ただ、スマホの画面では小さくて操作は少し微妙です。

iPhoneで操作してみて、コードもメモに貼り付けできました。
（以下に実際のキャプチャを添付しています）

  • 出来なくはないけど、、、
    • これが、スマホでの操作をお勧めしない理由です。
スマホ操作
Operations
Glass Morphism Design
Glass Morphism Design　グラス モーフィズム

操作画面に▲戻る

＜ ＞ クリックで背景画像入替

＜ または、＞で入れ替わります。画像は以下の様なものを用意しています。

操作画面に▲戻る

グラス モーフィズム

操作画面に▲戻る

お好みの背景画像はURL指定で

  • URL指定でお好みの背景画像に
  • お好みの背景画像に合わせたGlaassのデザイン
URL指定
URL指定でお好みの背景画像

操作画面に▲戻る

表現 ➡ デザイン サンプル

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

目次に 戻る

更新履歴

2023/12/11
非推奨となっていた、document.execCommand(‘copy’);の使用を避ける為に、Clipboard API（別記）使用に変更。及びバグ修正

function copyToClipboard(x) {
    navigator.clipboard.writeText(document.getElementById(x).textContent);
  }
  • 12/17：本環境のコンテンツ整理（制作経過途上表現の削除、「Ctrl」＋「F5」実施ガイダンスの削除）および表現の整理・整備、当更新履歴の追記
    出力用ではなく、当コンテンツの為の表現用カスタムHTML & カスタムcssの整備・編集
  • 12/12：本環境での変更（Local環境での変更テスト検証分を反映）及び、本環境で新しいCSSプロパティの出力がうまく行かない場合に、Windows上で「Ctrl」＋「F5」の実施を促すガイダンスメッセージを追記、キャプチャ画像の入れ替え、操作画面にFontAwesome5アイコン動作を加え操作可能画面とキャプチャ画像との表示明確化。利用一例を、カスタムHTMLブロックを利用して表現。
  • 12/11～12/15：Local環境で、CSSの（position:relative; ＆ z-index:0px; ）,margin,paddingプロパティのデフォルト設定出力追加、borderプロパティの細分化出力に変更(top,right,bottom,left,radias,color等) CSSスケルトン利用時の利便性確保、width:100%;で媒体に合わせた出力幅の確保(これらの変更の為JavaScliptを編集)。
  • 12/08～12/11：本環境での変更（Local環境での変更テスト検証分を反映）
  • 12/07：本環境の画面キャプチャ及び記事の一部を更新（入れ替え）、利便性確保。
  • 12/02～12/11：Local環境で各種設定変更および動作検証＆画面キャプチャ
    12/05：class名およびid名の動的命名方式採用(JavaSclipt)で、複数回のCode出力利用時の利便性も確保。
  • 12/01：LocalからServerに移植後、本環境のサイトで公開
  • 11/28～12/05 Note PCのLocal環境(MySQL＋PHP)に移植、～12/11各種調整＆画面キャプチャ
  • 11/19～　Note PC上での作成開始

目次に 戻る

PR広告

コメント