| 概要 | ヘッダーにガラスのような半透明の背景を追加します | |
| プレビュー | Vimeo デモ | |
| リポジトリ | https://github.com/denvergeeks/discourse-header-glass | |
| インストールガイド | テーマまたはテーマコンポーネントのインストール方法 | |
| Discourse テーマ初心者の方へ | Discourse テーマ使用の初心者ガイド |
このテーマコンポーネントをインストール
| 概要 | ヘッダーにガラスのような半透明の背景を追加します | |
| プレビュー | Vimeo デモ | |
| リポジトリ | https://github.com/denvergeeks/discourse-header-glass | |
| インストールガイド | テーマまたはテーマコンポーネントのインストール方法 | |
| Discourse テーマ初心者の方へ | Discourse テーマ使用の初心者ガイド |
このテーマコンポーネントをインストール
おお、それは素晴らしいですね。気に入りましたし、フォーラムで使うかもしれません。半透明のヘッダーはありますが、このガラス効果は気に入りました!よくできています!
![]()
コンポーネントには設定がありますか?
編集:今見ました、ありませんね。影付きのアイコンが大好きです!
設定はありませんが、リクエストやPRはいつでも大歓迎です!!!
ああ、影付きのヘッダーアイコン… CSSはすべてここにあります…
.d-header {
background: rgb(147, 147, 147, 0.39) !important;
-webkit-backdrop-filter: blur(10px) !important;
-moz-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5) !important;
color: rgb(255 255 255) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.d-header-icons .d-icon,
.header-sidebar-toggle button .d-icon {
color: rgb(255 255 255) !important;
fill: rgb(255 255 255) !important;
filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.4)) !important;
}
このビジュアルエフェクトは素晴らしいですね。ステンドグラスのような見た目が気になります。
今度はステンドグラス風のエフェクトを作りたいです ![]()
コードはすでにフォークしました lol
いいね!リンクありがとう ![]()
オーマイガー ![]()
これでフォーラムの新しいテーマを作りたくなりました ![]()
@Lilly あなたの作品を見るのが待ちきれません!頑張って!!!
うーん、テーマのデザインはあまり得意ではありません。作成はできますが、特にニーズを定義する他の人のために、コンポーネントや機能的なタイプのソリューションの創造性を好みます。
サイトアーキテクチャ、ナビゲーション、UI/UXはすべて機能的なアートであり、人々が最も満足のいく方法でつながるのを助けるために作成されています。![]()
ちくしょう!リンクを投稿し忘れたよ - 気まぐれで色と透明度の設定を追加したんだ ![]()
ゾインクス!リリーさん、ありがとうございます!色と透明度の設定、そしてヘッダーアイコンのドロップシャドウの設定も追加しました。
影付きでもまだ良いと思うので、それに合わせてスイッチを入手できることを願っています。
こんにちは、@Monikas フィードバックありがとうございます。設定に具体的にどのようなものが理想的か、もう少し詳しく教えていただけますか?
はい、ヘッダーの下端の影の設定を追加しました。