Стекло заголовка

:information_source: Сводка Добавляет глянцевый полупрозрачный фон к заголовку
:eyeglasses: Предпросмотр Демо на Vimeo
:hammer_and_wrench: Репозиторий https://github.com/denvergeeks/discourse-header-glass
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

Установить этот компонент темы

https://vimeo.com/854974662/bcb55714a2

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 лайк

Я уже форкнул код, лол

1 лайк
2 лайка

Отлично! Спасибо за ссылку :hugs:

1 лайк

1 лайк

О боже. Боже. Боже. :heart_eyes_cat:

Теперь ты вдохновил меня начать создавать новую тему для моего форума. :grin:

4 лайка

@Lilly, я с нетерпением жду, когда увижу твоё творение! Ты молодец, девочка!!!

1 лайк

эх, дизайн тем — это не совсем моя сильная сторона. Я могу их создавать, но предпочитаю креативность компонентов и функциональные решения, особенно для тех, кто определяет потребность.

3 лайка

Архитектура сайта, навигация, UI/UX — всё это функциональное искусство :framed_picture:, созданное, чтобы помогать людям общаться наиболее приятным образом.

5 лайков

Ух ты! Забыл добавить ссылку — добавил настройки цвета и прозрачности просто для интереса :upside_down_face:

4 лайка

Ух ты! Спасибо, @Lilly! Я добавил ваши настройки цвета и прозрачности, а также настройку для тени выпадающего списка на иконках заголовка.

3 лайка

Думаю, с тенями всё ещё выглядит хорошо. Надеюсь, смогу добавить переключатель для этого.

1 лайк

Привет @Monikas, спасибо за обратную связь! Не могли бы вы подробнее рассказать, что именно вы хотели бы видеть в настройках?

2 лайка


Ах, да. Я теперь добавил настройку для тени на нижнем крае заголовка.

1 лайк