ヘッダーガラス

:information_source: 概要 ヘッダーにガラスのような半透明の背景を追加します
:eyeglasses: プレビュー Vimeo デモ
:hammer_and_wrench: リポジトリ https://github.com/denvergeeks/discourse-header-glass
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourse テーマ初心者の方へ Discourse テーマ使用の初心者ガイド

このテーマコンポーネントをインストール

「いいね!」 16

おお、それは素晴らしいですね。気に入りましたし、フォーラムで使うかもしれません。半透明のヘッダーはありますが、このガラス効果は気に入りました!よくできています!:clap: :slight_smile:

コンポーネントには設定がありますか?

編集:今見ました、ありませんね。影付きのアイコンが大好きです!

設定はありませんが、リクエストや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;
}

「いいね!」 3

このビジュアルエフェクトは素晴らしいですね。ステンドグラスのような見た目が気になります。

今度はステンドグラス風のエフェクトを作りたいです :joy:

「いいね!」 1

コードはすでにフォークしました lol

「いいね!」 1
「いいね!」 2

いいね!リンクありがとう :hugs:

「いいね!」 1

「いいね!」 1

オーマイガー :heart_eyes_cat:
これでフォーラムの新しいテーマを作りたくなりました :grin:

「いいね!」 4

@Lilly あなたの作品を見るのが待ちきれません!頑張って!!!

「いいね!」 1

うーん、テーマのデザインはあまり得意ではありません。作成はできますが、特にニーズを定義する他の人のために、コンポーネントや機能的なタイプのソリューションの創造性を好みます。

「いいね!」 3

サイトアーキテクチャ、ナビゲーション、UI/UXはすべて機能的なアートであり、人々が最も満足のいく方法でつながるのを助けるために作成されています。:framed_picture:

「いいね!」 5

ちくしょう!リンクを投稿し忘れたよ - 気まぐれで色と透明度の設定を追加したんだ :upside_down_face:

「いいね!」 4

ゾインクス!リリーさん、ありがとうございます!色と透明度の設定、そしてヘッダーアイコンのドロップシャドウの設定も追加しました。

「いいね!」 3

影付きでもまだ良いと思うので、それに合わせてスイッチを入手できることを願っています。

「いいね!」 1

こんにちは、@Monikas フィードバックありがとうございます。設定に具体的にどのようなものが理想的か、もう少し詳しく教えていただけますか?

「いいね!」 2


はい、ヘッダーの下端の影の設定を追加しました。

「いいね!」 1