В прошлых уроках мы подробно разбирали блочную модель вертски, как отступать блоки друг от друга, изучали поведение и расположение элементов относительно друг друга. Но как располагать элементы на странице, не влияя на расположение других блоков,  не нарушая семантику документа? Для этого существует позиционирование (position). Это правило может применять 4 значения — relative, absolute, fixed и static. В этом уроке речь пойдет о фиксированном позиционировании (position:fixed) Важно сказать, что применение одного лишь правила position недостаточно...

Трюк по CSS ⭐ Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position. .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @​keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨. Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение...