Cabeçalho de Vidro

[denvergeeks]

	Resumo	Adiciona um fundo vítreo e translúcido ao cabeçalho
	Prévia	Demo do Vimeo
	Repositório	https://github.com/denvergeeks/discourse-header-glass
	Guia de Instalação	Como instalar um tema ou componente de tema
	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) →

[Lilly (Lillian)]

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!

o componente tem alguma configuração?

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

[denvergeeks]

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;
}

[Lilly (Lillian)]

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

[Lilly (Lillian)]

já fiz o fork do código kkk

[denvergeeks]

Glassmorphism CSS Effect Generator - Glass CSS

[Lilly (Lillian)]

legal! obrigado pelo link

[denvergeeks]

[Lilly (Lillian)]

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

[denvergeeks]

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

[Lilly (Lillian)]

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.

[denvergeeks]

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

[Lilly (Lillian)]

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

GitHub - Lillinator/glass-header: glass header

[denvergeeks]

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.

[Monikas (JustMonika)]

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

[denvergeeks]

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

[Monikas (JustMonika)]

[denvergeeks]

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