Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Дополняет статью о backdrop-filter #5679

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Дополняет статью о backdrop-filter #5679

wants to merge 1 commit into from

Conversation

goingtogogo
Copy link
Contributor

Описание

  1. Дополнила описание
  2. Добавила две интерактивные демки, чтобы продемонстрировать работу свойства

Closes #604

Чек-лист

  • Текст оформлен согласно руководству по стилю
  • Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
  • Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

@github-actions github-actions bot added css Контент по CSS дока Справочный материал labels Jan 31, 2025
@github-actions GitHub Actions
Copy link

Превью контента из 536415e опубликовано.

Inventoris
Inventoris reviewed Feb 4, 2025
View reviewed changes
Copy link
Member

@Inventoris Inventoris left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Привет! Спасибо большое за дополнения 🙌

Стало куда лучше, у тебя очень хороший текст и демки супер. Оставил несколько комментов, как с ними закончим, я ещё вернусь посмотреть код подробнее 💟

css/backdrop-filter/index.md
---

## Кратко

Свойство `backdrop-filter` позволяет применить фильтры типа размытия, изменения контраста или обесцвечивания к фоновому изображению, находящемуся за элементом. Для видимого эффекта сам элемент должен быть полностью или частично прозрачным.
Свойство `backdrop-filter` позволяет применять визуальные эффекты (размытие, контраст, прозрачность и т. д.) к фону элементов, находящихся за целевым элементом. Оно работает так же, как свойство [`filter`](/css/filter/), но вместо того, чтобы изменять сам элемент, оно применяется только к его фону. Чтобы эффект заработал, у элемента должен быть прозрачный фон (`rgba`, `opacity`, `transparent` и т.д.), иначе backdrop-filter не будет заметен.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Давай уберём лишнее "оно":

Suggested change
Свойство `backdrop-filter` позволяет применять визуальные эффекты (размытие, контраст, прозрачность и т. д.) к фону элементов, находящихся за целевым элементом. Оно работает так же, как свойство [`filter`](/css/filter/), но вместо того, чтобы изменять сам элемент, оно применяется только к его фону. Чтобы эффект заработал, у элемента должен быть прозрачный фон (`rgba`, `opacity`, `transparent` и т.д.), иначе backdrop-filter не будет заметен.
Свойство `backdrop-filter` позволяет применять визуальные эффекты (размытие, контраст, прозрачность и т. д.) к фону элементов, находящихся за целевым элементом. Оно работает так же, как свойство [`filter`](/css/filter/), но вместо того, чтобы изменять сам элемент, применяется только к его фону. Чтобы эффект заработал, у элемента должен быть прозрачный фон (`rgba`, `opacity`, `transparent` и т.д.), иначе backdrop-filter не будет заметен.

css/backdrop-filter/index.md

В качестве значения можно использовать любые [функции фильтров](/css/filter-functions/), либо ключевое слово `none` для отключения любых фильтров.


Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

css/backdrop-filter/index.md
}
```

В качестве значения можно использовать любые [функции фильтров](/css/filter-functions/), либо ключевое слово `none` для отключения любых фильтров.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Предлагаю переформулировать, чтобы избежать повторения слова "фильтров".

Suggested change
В качестве значения можно использовать любые [функции фильтров](/css/filter-functions/), либо ключевое слово `none` для отключения любых фильтров.
В качестве значения можно использовать любые [функции фильтров](/css/filter-functions/), либо ключевое слово `none` для отключения всех эффектов.

css/backdrop-filter/index.md

Полупрозрачный фон с размытием создаёт эффект матового стекла, сквозь которое просвечивает задний фон. Такой приём часто используется в современных интерфейсах. С появлением backdrop-filter его стало гораздо проще реализовать. Попробуйте понастраивать параметры в демке!

<iframe title="Интерактивный пример backdrop-filter" src="demos/frosted-glass/" height="700"></iframe>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Тут синхронизируем с названием демки:

Suggested change
<iframe title="Интерактивный пример backdrop-filter" src="demos/frosted-glass/" height="700"></iframe>
<iframe title="Эффект матового стекла" src="demos/frosted-glass/" height="700"></iframe>

css/backdrop-filter/index.md

### Эффект матового стекла (глассморфизм)

Полупрозрачный фон с размытием создаёт эффект матового стекла, сквозь которое просвечивает задний фон. Такой приём часто используется в современных интерфейсах. С появлением backdrop-filter его стало гораздо проще реализовать. Попробуйте понастраивать параметры в демке!
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Полупрозрачный фон с размытием создаёт эффект матового стекла, сквозь которое просвечивает задний фон. Такой приём часто используется в современных интерфейсах. С появлением backdrop-filter его стало гораздо проще реализовать. Попробуйте понастраивать параметры в демке!
Полупрозрачный фон с размытием создаёт эффект матового стекла, сквозь которое просвечивает задний фон. Такой приём часто используется в современных интерфейсах. С появлением `backdrop-filter` его стало гораздо проще реализовать. Попробуйте понастраивать параметры в демке!

css/backdrop-filter/index.md
---

## Кратко

Свойство `backdrop-filter` позволяет применить фильтры типа размытия, изменения контраста или обесцвечивания к фоновому изображению, находящемуся за элементом. Для видимого эффекта сам элемент должен быть полностью или частично прозрачным.
Свойство `backdrop-filter` позволяет применять визуальные эффекты (размытие, контраст, прозрачность и т. д.) к фону элементов, находящихся за целевым элементом. Оно работает так же, как свойство [`filter`](/css/filter/), но вместо того, чтобы изменять сам элемент, оно применяется только к его фону. Чтобы эффект заработал, у элемента должен быть прозрачный фон (`rgba`, `opacity`, `transparent` и т.д.), иначе backdrop-filter не будет заметен.


## Как пишется
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Давай поменяем местами этот раздел с разделом "Пример". Потому что сначала "Кратко", потом "Пример", и уже потом "Как пишется".

Ещё в "Пример" поместим код из "Как пишется", а в "Как пишется" добавим несколько примеров с разными функциями фильтров и перенесём чудесную демку (в конец).

css/backdrop-filter/index.md

<iframe title="Песочница" src="demos/playground/" height="650"></iframe>

### Эффект матового стекла (глассморфизм)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Вот этот раздел очень крутой, мне нравится. Как на счёт вынести его в "На практике", что вот мол есть такой популярный эффект и вот как его сделать.

css/backdrop-filter/demos/frosted-glass/index.html
</div>
</div>
<code class="code-sample">
<pre>backdrop-filter: <span id="backdropValue">blur(5px)</span>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<pre>backdrop-filter: <span id="backdropValue">blur(5px)</span>;
<pre>backdrop-filter: <span id="backdropValue">blur(5px)</span>;

css/backdrop-filter/demos/frosted-glass/index.html
const frostedGlassStyle = window.getComputedStyle(frostedGlass)
const backgroundColor = frostedGlassStyle.getPropertyValue('background-color')
const [bgPart1, bgPart2, bgPart3] = backgroundColor.split(',')
const backgroundColorRGBa = `${ bgPart1 }, ${ bgPart2 }, ${ bgPart3.replace(')', '') }, ${ event.target.value })`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Я очень бегло посмотрел, но где-то здесь в логике появляются дублирующиеся пробелы в коде вот так, нужно их убрать:

image

css/backdrop-filter/demos/playground/index.html
display: grid;
place-items: center;
background-color: #18191c;
color: #f1f1f1
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
color: #f1f1f1
color: #f1f1f1;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Inventoris Inventoris Inventoris left review comments

@skorobaeus skorobaeus Awaiting requested review from skorobaeus skorobaeus is a code owner

@solarrust solarrust Awaiting requested review from solarrust solarrust is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@goingtogogo goingtogogo

Labels
css Контент по CSS дока Справочный материал
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Свойство backdrop-filter
2 participants
@goingtogogo @Inventoris