Cabeçalho de Vidro

Componente de tema
1
:information_source: Resumo Adiciona um fundo vítreo e translúcido ao cabeçalho
:eyeglasses: Prévia Demo do Vimeo
:hammer_and_wrench: Repositório https://github.com/denvergeeks/discourse-header-glass
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre como usar Temas do Discourse

<!- Preencha "repoName" e "repoURL" para o botão de instalação automática →

Instale este componente de tema

<!- Descreva este tema/componente em uma ou duas frases →

<!- Adicione mais detalhes e explique as configurações (se aplicável) →

16 curtidas
2

ah, que legal. Eu gosto disso e posso usá-lo no meu fórum. Tenho cabeçalhos semitransparentes, mas gosto desse efeito de vidro. Bem feito! :clap: :slight_smile:

o componente tem alguma configuração?

editar: eu vejo agora que não tem. Eu amo os ícones sombreados!

3

Nenhuma configuração, mas solicitações e PRs são muito bem-vindas!!!

Ah, os ícones de cabeçalho sombreados… aqui está todo o 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 curtidas
4

Eu amo este efeito visual. Curioso sobre a aparência do vidro colorido.
Quero fazer um efeito de vitral agora :joy:

1 curtida
5

já fiz o fork do código kkk

1 curtida
6
2 curtidas
7

legal! obrigado pelo link :hugs:

1 curtida
8

1 curtida
9

Meu. Deus. do. Céu. :heart_eyes_cat:
Agora você me inspirou a começar a construir um novo tema para o meu fórum. :grin:

4 curtidas
10

@Lilly Mal posso esperar para ver sua criação! Arrase!!!

1 curtida
11

meh, o design de temas não é realmente meu forte. Posso criá-los, mas prefiro a criatividade de componentes e soluções do tipo funcional, especialmente para outros que definem uma necessidade.

3 curtidas
12

Arquitetura do Site, Navegação, UI / UX – tudo é arte funcional :framed_picture: criada para ajudar as pessoas a se conectarem das maneiras mais satisfatórias.

5 curtidas
13

Zoinks! Esqueci de postar um link - Adicionei configurações de cor e transparência por diversão :upside_down_face:

4 curtidas
14

Zoinks! Obrigado @Lilly! Adicionei suas configurações de cor e transparência, e também uma configuração para a sombra projetada nos ícones do cabeçalho.

3 curtidas
15

Eu acho que ainda fica bom com sombras, espero conseguir um switch para isso.

1 curtida
16

Olá @Monikas, obrigado pelo feedback, mas você poderia, por favor, detalhar o que você gostaria idealmente nas configurações?

2 curtidas
17

A imagem mostra uma captura de tela de uma página da web com o rosto de uma garota de desenho animado e uma barra de pesquisa, provavelmente relacionada a um site ou serviço chinês. (Legenda por IA)
A imagem mostra uma captura de tela de uma página da web com o rosto de uma garota de desenho animado e uma barra de pesquisa, provavelmente relacionada a um site ou serviço chinês. (Legenda por IA)1572×140 49 KB

A imagem parece ser uma captura de tela de uma plataforma de mídia social chinesa, apresentando uma barra de navegação na parte superior com texto e caracteres borrados, acompanhada por um ícone de pesquisa, um ícone de mensagem e um ícone de perfil. (Legenda por IA)
A imagem parece ser uma captura de tela de uma plataforma de mídia social chinesa, apresentando uma barra de navegação na parte superior com texto e caracteres borrados, acompanhada por um ícone de pesquisa, um ícone de mensagem e um ícone de perfil. (Legenda por IA)1588×186 64.6 KB

18

Ah, sim. Adicionei agora uma configuração para a sombra na borda inferior do cabeçalho.

1 curtida