Senior Frontend - javascript, html, css
الذهاب إلى القناة على Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
إظهار المزيد
📈 نظرة تحليلية على قناة تيليجرام Senior Frontend - javascript, html, css
تُعد قناة Senior Frontend - javascript, html, css (@seniorfront) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 23 446 مشتركاً، محتلاً المرتبة 5 670 في فئة التكنولوجيات والتطبيقات والمرتبة 27 878 في منطقة روسيا.
📊 مؤشرات الجمهور والحراك
منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 23 446 مشتركاً.
بحسب آخر البيانات بتاريخ 12 نوفمبر, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -336، وفي آخر 24 ساعة بمقدار -8، مع بقاء الوصول العام مرتفعاً.
- حالة التحقق: غير موثّقة
- معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 5.38%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 2.88% من ردود الفعل نسبةً إلى إجمالي المشتركين.
- وصول المنشورات: يحصل كل منشور على متوسط 1 262 مشاهدة. وخلال اليوم الأول يجمع عادةً 675 مشاهدة.
- التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 2.
- الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل css, node.js, api, архитектура, html.
📝 الوصف وسياسة المحتوى
يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 13 نوفمبر, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.
23 446
المشتركون
-824 ساعات
-737 أيام
-33630 أيام
جارٍ تحميل البيانات
القنوات المماثلة
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
نوفمبر '26نوفمبر '26
نوفمبر '26
+28
في 0 قنوات
أكتوبر '26
+90
في 2 قنوات
Get PRO
سبتمبر '26
+100
في 11 قنوات
Get PRO
أغسطس '26
+104
في 1 قنوات
Get PRO
يوليو '26
+91
في 0 قنوات
Get PRO
يونيو '26
+112
في 0 قنوات
Get PRO
مايو '26
+80
في 4 قنوات
Get PRO
أبريل '26
+63
في 0 قنوات
Get PRO
مارس '26
+86
في 0 قنوات
Get PRO
فبراير '26
+123
في 0 قنوات
Get PRO
يناير '26
+121
في 0 قنوات
Get PRO
ديسمبر '25
+140
في 1 قنوات
Get PRO
نوفمبر '25
+186
في 0 قنوات
Get PRO
أكتوبر '25
+214
في 0 قنوات
Get PRO
سبتمبر '25
+208
في 4 قنوات
Get PRO
أغسطس '25
+171
في 0 قنوات
Get PRO
يوليو '25
+243
في 0 قنوات
Get PRO
يونيو '25
+210
في 8 قنوات
Get PRO
مايو '25
+211
في 6 قنوات
Get PRO
أبريل '25
+220
في 0 قنوات
Get PRO
مارس '25
+250
في 0 قنوات
Get PRO
فبراير '25
+223
في 0 قنوات
Get PRO
يناير '25
+402
في 4 قنوات
Get PRO
ديسمبر '24
+304
في 1 قنوات
Get PRO
نوفمبر '24
+318
في 8 قنوات
Get PRO
أكتوبر '24
+570
في 9 قنوات
Get PRO
سبتمبر '24
+483
في 0 قنوات
Get PRO
أغسطس '24
+518
في 0 قنوات
Get PRO
يوليو '24
+413
في 1 قنوات
Get PRO
يونيو '24
+375
في 2 قنوات
Get PRO
مايو '24
+619
في 27 قنوات
Get PRO
أبريل '24
+424
في 0 قنوات
Get PRO
مارس '24
+685
في 14 قنوات
Get PRO
فبراير '24
+610
في 2 قنوات
Get PRO
يناير '24
+706
في 17 قنوات
Get PRO
ديسمبر '23
+940
في 45 قنوات
Get PRO
نوفمبر '23
+919
في 27 قنوات
Get PRO
أكتوبر '23
+1 027
في 29 قنوات
Get PRO
سبتمبر '23
+1 193
في 0 قنوات
Get PRO
أغسطس '23
+515
في 0 قنوات
Get PRO
يوليو '23
+543
في 0 قنوات
Get PRO
يونيو '23
+550
في 0 قنوات
Get PRO
مايو '23
+471
في 0 قنوات
Get PRO
أبريل '23
+682
في 0 قنوات
Get PRO
مارس '23
+868
في 0 قنوات
Get PRO
فبراير '23
+720
في 0 قنوات
Get PRO
يناير '23
+940
في 0 قنوات
Get PRO
ديسمبر '22
+767
في 0 قنوات
Get PRO
نوفمبر '22
+274
في 0 قنوات
Get PRO
أكتوبر '22
+469
في 0 قنوات
Get PRO
سبتمبر '22
+475
في 0 قنوات
Get PRO
أغسطس '22
+504
في 0 قنوات
Get PRO
يوليو '22
+842
في 0 قنوات
Get PRO
يونيو '22
+556
في 0 قنوات
Get PRO
مايو '22
+472
في 0 قنوات
Get PRO
أبريل '22
+776
في 0 قنوات
Get PRO
مارس '22
+212
في 0 قنوات
Get PRO
فبراير '22
+556
في 0 قنوات
Get PRO
يناير '22
+647
في 0 قنوات
Get PRO
ديسمبر '21
+1 040
في 0 قنوات
Get PRO
نوفمبر '21
+448
في 0 قنوات
Get PRO
أكتوبر '21
+842
في 0 قنوات
Get PRO
سبتمبر '21
+606
في 0 قنوات
Get PRO
أغسطس '21
+690
في 0 قنوات
Get PRO
يوليو '21
+1 129
في 0 قنوات
Get PRO
يونيو '21
+769
في 0 قنوات
Get PRO
مايو '21
+771
في 0 قنوات
Get PRO
أبريل '21
+2 657
في 0 قنوات
Get PRO
مارس '21
+945
في 0 قنوات
Get PRO
فبراير '21
+409
في 0 قنوات
Get PRO
يناير '21
+1 729
في 0 قنوات
Get PRO
ديسمبر '20
+11 956
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 13 نوفمبر | +1 | |||
| 12 نوفمبر | +3 | |||
| 11 نوفمبر | +2 | |||
| 10 نوفمبر | 0 | |||
| 09 نوفمبر | +1 | |||
| 08 نوفمبر | 0 | |||
| 07 نوفمبر | +1 | |||
| 06 نوفمبر | +4 | |||
| 05 نوفمبر | +3 | |||
| 04 نوفمبر | +6 | |||
| 03 نوفمبر | +1 | |||
| 02 نوفمبر | +6 | |||
| 01 نوفمبر | 0 |
منشورات القناة
📍 Как вернуть геолокацию, от которой пользователь однажды отказался
Обычный сценарий: сайт запрашивает координаты через
navigator.geolocation.getCurrentPosition(), человек жмёт «Блокировать» и просит браузер запомнить выбор. С этого момента кнопка на сайте просто молча не работает. Чтобы передумать, надо искать сайт в настройках браузера.
В HTML появился элемент-кнопка <geolocation>. Нажатие на него либо сразу срабатывает, либо снова показывает запрос. Пунктов там два: «разрешить всегда» и «разрешить один раз». Отказ теперь означает просто закрыть окно, поэтому сайт не застревает в вечном запрете.
В анонсе Chrome приводят данные ZapImóveis: 54,4% пользователей, ранее заблокировавших доступ, разрешили его, увидев элемент.
Оговорка: пока элемент работает только в Chrome и родственных браузерах. В остальных срабатывает запасной вызов старого API, и там проблема остаётся.
Автор предполагает, что для камеры и микрофона с похожим <usermedia> это ещё важнее.
👍 - если было полезно
👉 @seniorFront| 2 |  🎢 Галерея, где правая колонка фото обгоняет левую, и без JavaScript
Сам скролл никто не трогает, это иллюзия. Правой колонке дают обычную CSS-анимацию сдвига по вертикали. Только её прогресс зависит не от времени, а от прокрутки: animation-timeline: scroll(root block) привязывает его ко всей странице.
@keyframes drift-up {
from {
transform: translateY(12vh);
}
to {
transform: translateY(-20vh);
}
}
Пока страница прокручивается до конца, колонка дополнительно уезжает вверх. Поэтому кажется, что она движется быстрее соседней.
Scroll-Driven Animations есть не во всех браузерах, так что правило обёрнуто в @supports. Без поддержки останется обычная галерея из двух колонок.
В статье ещё лёгкий зум каждого фото при прокрутке и вариант, где колонка едет навстречу скроллу.
👍 - если было полезно
👉 @seniorFront | 808 |
| 3 |  Яндекс Музыка до 360 дней бесплатно
Яндекс Музыка для вас и 3-х ваших близких.
Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс.
Попробуйте бесплатно❤️
Слушать
#реклама 18+
music.yandex.ru
О рекламодателе | 827 |
| 4 | Пишешь на JavaScript, но до Angular руки так и не дошли?
Слышал про Angular, но всё никак не находилось времени разобраться? Или просто не знал, с чего начать?🤔
Есть возможность попробовать его сразу на практике, без долгих поисков туториалов. На бесплатном 7-дневном интенсиве ты будешь шаг за шагом создавать веб-сервис доставки: с главной страницей, оформлением заказа и его отслеживанием.
Заодно поработаешь с HTML, CSS, JavaScript, попробуешь TypeScript и Angular и увидишь, как всё это объединяется в одном проекте.
Никаких вложений — просто приходи, пробуй и разбирайся, твоё это или нет.
↗️ Попробовать бесплатно
Реклама. ИП Чернова О.А., ИНН:771399721044 | 869 |
| 5 |  🎨 Контурная фигура с градиентом в три строки CSS
Нужна звезда или стрелка, у которой виден только контур, да ещё и залитый градиентом? Автор сайта css-tip.com показывает, как обойтись без хаков и сложного кода: хватает связки border-shape и border-area.
Рамка делается прозрачной. border-shape задаёт её форму: она идёт не по прямоугольнику, а по фигуре из shape(), polygon() и подобных функций. Градиент кладётся в background с ключевым словом border-area и закрашивает только саму рамку.
.shape-gradient { border: 10px solid #0000; /* a transparent border */ border-shape: shape() | polygon() | etc; /* the shape */ background: linear-gradient(#0077b6,#f4a261) border-area; /* gradient + border-area */}
Вместо shape() | polygon() | etc подставляете одну свою фигуру.
Есть важная оговорка: пока это работает только в браузерах на Chromium.
В демо на CodePen к заметке собраны сложные фигуры, нарисованные этим приёмом.
👍 - если было полезно
👉 @seniorFront | 875 |
| 6 |  🧱 Плитка как в Pinterest на чистом CSS, без JS и подсчёта высот
Masonry — раскладка, где карточки разной высоты плотно стоят в колонках без дыр. Раньше для неё брали Masonry.js или хак на Grid с заранее известными высотами.
Теперь в CSS есть display: grid-lanes: колонки задаются как в Grid, а раскладку делает браузер.
.masonry {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
Колонок столько, сколько влезет, каждая не уже 14rem. Следующая карточка обычно идёт в самую короткую колонку, общих рядов нет.
В прод пока рано: grid-lanes работает в Safari 26.4 и новее, в остальных браузерах поддержка ещё в пути, а спецификация остаётся черновиком. Автор советует держать запасную раскладку попроще.
👍 - если было полезно
👉 @seniorFront | 1 006 |
| 7 |  Максимальная скидка года на английский: –22% до 11.11
70% обучения — разговорная практика. Заговорите с первого урока вне зависимости от уровня
Записаться онлайн
#реклама 16+
practicum.yandex.ru
О рекламодателе | 895 |
| 8 |  ✅ В CSS есть true и false, и на них можно строить логику
Слова true и false в CSS уже есть, например в inherits у @property. Их можно положить в кастомное свойство и проверять в style-запросах контейнера.
Пример из статьи: фильтр сумок на двух чекбоксах. Свойства --isBackpack и --isDuffel регистрируют через @property с syntax: "true | false" и false по умолчанию. На :root правило :has(#isBackpack:checked) ставит свойству true.
Дальше вместо горы селекторов с :checked и :not(:checked) пишем одно понятное условие:
@container root style(--isBackpack: true) and style(--isDuffel: false)
Внутри прячем всё, кроме рюкзаков.
Свойства сделаны ненаследуемыми. Поэтому :root нужно дать container-name: root, иначе запросу в глубоком потомке не на кого сослаться.
Весь фильтр со всеми комбинациями чекбоксов разобран в статье.
👍 - если было полезно
👉 @seniorFront | 1 122 |
| 9 |  Зарабатывайте на установках Яндекс Браузера
Рекомендуйте Яндекс Браузер и поиск Яндекса и зарабатывайте до 600 ₽ за каждого привлечённого пользователя.
Партнёрская программа для каждого: от мастера по ремонту ПК до блогера — это возможность получать дополнительный доход от того, что вы уже делаете.
– Бонусы для ваших пользователей и клиентов
– Удобные инструменты для работы офлайн и онлайн
– Наглядная статистика и стабильные выплаты
Предлагайте приложения Яндекса своим читателям и клиентам в вашем блоге, сервисном центре или на сайте — и получайте вознаграждения.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 819 |
| 10 |  🎲 В CSS появился random(), и вёрстка может стать чуть живее
Функция random() выдаёт случайное значение прямо в CSS. Раньше для такого брали JS-библиотеку или Sass-цикл, который генерировал сотни строк статичного CSS.
Вы задаёте границы, а браузер сам выбирает значение. Третий аргумент задаёт шаг:
/* Only produces 0px, 15px, 30px, 45px, or 60px */
top: random(0px, 60px, 15px);
В статье на Smashing Magazine слово разбито на отдельные буквы, и каждая получает свой лёгкий наклон и сдвиг. Заголовок выглядит как старая типографская печать, а при наведении буквы выпрямляются.
Поддержка пока не везде. Safari уже умеет, в Chrome функция приходит с версией 156, от Firefox пока только положительные сигналы. Поэтому ровный вариант пишем по умолчанию, а случайность прячем внутрь @supports.
В статье ещё прыгающие буквы, веер карт на скролле и боке из размытых слов.
👍 - если было полезно
👉 @seniorFront | 1 377 |
| 11 |  +4Телеграм канал AI для бизнеса
AI - не будущее. Это настоящее вашего бизнеса.
Телеграм-канал "AI для бизнеса" знает все о внедрении и использовании искусственного интеллекта в бизнесе в России и мира. Только со своими подписчиками канал делится:
- как внедрить искусственный интеллект в реальные бизнес-процессы,
- разборами кейсов: как компании сократили затраты на 30-50% с помощью AI,
- лайфхаками по автоматизации рутинных задач,
- новостями мира AI и разборами трендов.
Сами давно читаем и вам советуем подписаться.
Подписаться
#реклама 16+
О рекламодателе | 818 |
| 12 |  FrontendOffer поможет пройти техсобесы
Вы сейчас готовитесь к собеседованиям или уже проходите? Не чувствуете себя уверенно со всеми этими километровыми задачами на «что выведет консоль»? Давно не практиковались в лайвкодинге и боитесь налажать?
Поиск работы - дело одинокое и неприятное, но мы справимся вместе.
⚡ FrontendOffer - это:
⚫️бот со 100+ вопросами, консольными задачами и лайвкодингами с реальных собеседований от джуновского до сеньорного уровня;
⚫️эталонные ответы, подробные объяснения и дополнительные ресурсы для всех задач - можно выучить, что от тебя ждут или понять тему вглубь ;
⚫️коммьюнити, в котором проводят воркшопы и созвоны 3-4 раза в месяц, вместе тренируют решения задач, прожаривают резюме и помогают проходить собесы уверенно;
📍Ближайшие ивенты коммьюнити:
12 ноября - Web Vitals: как измерять и прокачивать. Разберемся, кто такие эти ваши LCP, FCP, INP, CLS. На практике, на демке, научимся, как измерять веб вайтлсы и улучшать
19 ноября - React: решаем лайвкодинги с собесов. Будем разбирать 2 типа задач, с которыми вы можете столкнуться на собесе, посмотрим, какие типичные ловушки вам будут подстраивать и что надо прям зазубрить, чтобы хорошо прошло
26 ноября - AI-разработка фронтенда: реально работающие практики. Покажем концепты и подходы, которые реально спасут вам время, кукуху и не выжрут всю подписку за полчаса.
🖤Почему мы:
Автор проекта, Наташа Давыдова, фронтенд-разработчик с 6+ годами коммерческого опыта, включая бигтехи.
Я расскажу и покажу, как расщелкивать хардовые и софтовые собесы, чтобы получать офферы с максимальным КПД.
➡️ Приходи к нам, решай задачи, вступай в коммьюнити. Тебе больше не придется бороться с рынком в одиночку.
Реклама. ИП Райгородский Д.В. ИНН 645395014681 erid: CQH36pWzJqVKkJFHLr1VnRncmUJmC9f2BaG3sM44ZPuMMt | 1 244 |
| 13 |  🧮 Элемент CSS-сетки может сам узнать, в какой он строке и колонке
Возьмём адаптивную сетку с repeat(auto-fill, ...): колонок в ней ровно столько, сколько влезает по ширине. Темани Афиф показывает, как каждый элемент вычисляет свои координаты на чистом CSS, без JavaScript.
Число колонок считается из ширины контейнера (100cqw), ширины колонки и отступа, с округлением вниз. Порядковый номер элемента даёт sibling-index(). Делим номер на число колонок: целая часть станет номером строки --x, остаток номером колонки --y.
При ресайзе всё пересчитывается само. А с новой функцией if() по этим значениям можно красить, например, четвёртую строку (счёт идёт с нуля):
.container > * { background: if(style(--x = 3): red;)}
Условие у трюка одно: колонки должны быть одинаковой ширины. Строки при этом могут быть разной высоты.
В статье есть и выборки посложнее: последняя строка, конец первой строки и даже диагональ.
👍 - если было полезно
👉 @seniorFront | 1 092 |
| 14 |  ✂️ Лишний зазор над колонками убирается одним свойством
В CSS-раскладке на несколько колонок (multicol) часто возникает вопрос: откуда над первой колонкой лишнее пустое место? Это верхний margin первого абзаца. Внутри multicol-контейнера он не схлопывается.
Раньше выход был один: вообще не давать абзацам верхний отступ. Теперь есть свойство margin-trim. Пишем margin-trim: block-start на сам контейнер с колонками, и браузер обрезает верхний отступ у элемента, который стоит в его начале. В Chrome это работает с версии 155.
Подвох в Safari. Он понимает margin-trim с версии 16.4, но только для обычных блоков, а для колонок нет. Поэтому проверка через @supports там проходит, а отступ над колонками всё равно остаётся.
А в обычной блочной раскладке у margin-trim есть и другие полезные применения, и их уже можно пробовать.
👍 - если было полезно
👉 @seniorFront | 1 194 |
| 15 |  🎨 Рваный акварельный край на чистом SVG
Представьте открытку, где рисунок по тапу заливается акварелью. Обычная SVG-маска с градиентом, которая едет снизу вверх, даёт лишь ровную шторку, как в презентации.
Неровный край дают два SVG-фильтра. feTurbulence рисует облачный шум, похожий на разводы. feDisplacementMap сдвигает каждый пиксель маски на величину из этого шума, и прямая кромка становится изрезанной, как береговая линия.
Хитрость в том, что шум стоит на месте, а маска едет сквозь него. Поэтому край меняет форму на ходу: краска то забегает вперёд, то отстаёт, будто впитывается в бумагу.
Есть одна ловушка. Область фильтра по умолчанию всего на 10% больше элемента. Сдвинутые пиксели вылезают за неё, край обрезается по линейке, и эффект пропадает. Область нужно расширить: x="-35%" y="-35%" width="170%" height="170%".
А ещё в статье карандашные линии, которые рисуются сами, золотые искры и звук кисти без единого аудиофайла, и всё без библиотек.
👍 - если было полезно
👉 @seniorFront | 1 269 |
| 16 |  👩💻 Всем программистам посвящается!
Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
👩💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
👩💻 IT Новости — t.me/it_ready
🤖 AI & ML — t.me/neuro_ready
👩💻 Frontend — t.me/frontend_ready
👩💻 C/C++ — https://t.me/cpp_ready
👩💻 C# & Unity — t.me/csharp_ready
👩💻 Linux — t.me/linux_ready
👩💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
📱 JavaScript — t.me/javascript_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design — t.me/design_ready
📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования! | 1 283 |
| 17 |  ⚡ React Context без лишних ререндеров
В контексте лежат name и age. Меняется age, и заодно перерисовывается компонент, которому нужен только name. React сравнивает value провайдера целиком, а это каждый раз новый объект. useMemo и React.memo тут не спасают.
Выход в статье простой. Через Context передают не данные, а объект доступа к ним: { get, set, subscribe }. Он создаётся один раз, ссылка не меняется, и сам контекст никого не ререндерит.
Данные живут в useRef. Каждый компонент через useSyncExternalStore подписывается только на своё поле. Ввели возраст, и перерисовался один инпут возраста.
Есть цена: обновление такого стора внутри startTransition всё равно станет блокирующим, в фон его не увести.
В статье объяснено, зачем здесь именно useSyncExternalStore и почему store нельзя заворачивать в useMemo.
👍 - если было полезно
👉 @seniorFront | 1 448 |
| 18 |  Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 559 |
| 19 |  🔑 Один key, и редактор не путает заметки
Quill, WYSIWYG-редактор для браузера, хранит часть состояния внутри себя: выделение и историю undo. React об этом состоянии ничего не знает.
Когда один редактор по очереди показывает разные заметки, React переиспользует его экземпляр. Меняется только value, а выделение и история прошлой заметки остаются внутри Quill.
Решение простое: передать в key id заметки.
<NoteEditorClient
key={note.id}
value={note.contentHtml}
onChange={(nextHtml) =>
updateNoteContent(note.id, nextHtml)
}
/>
Новый key заставляет React размонтировать старый редактор и создать чистый. Состояние предыдущей заметки в следующую не переходит.
Обратная сторона: при каждом переключении история undo начинается с нуля.
В статье этот редактор ещё получает автосохранение после паузы во вводе и режим чтения с подсветкой кода.
👍 - если было полезно
👉 @seniorFront | 1 651 |
| 20 |  🐶 Как пустить элемент гулять по краю блока на чистом CSS
Свойство offset-path задаёт путь, а offset-distance ставит элемент в точку на нём. Путь не обязательно рисовать вручную: подойдёт рамка родителя, offset-path: border-box.
Например, с offset-distance: 20% кружок встаёт на рамку, пройдя пятую часть периметра. Пикселей нет, поэтому при смене размера блока всё подстраивается.
Дальше автор анимирует offset-distance через @keyframes, а значения берёт из CSS-функции random(). Кружок бегает по краю в случайные точки. Сработало, только когда у каждого вызова появился свой ключ вроде --k1.
Главная загвоздка в поддержке: на момент статьи random() есть в Safari, а в Chrome только за флагом. В других браузерах элемент просто стоит на месте, так что пригодится запасной вариант через @supports.
В статье из этого вырастают светящийся шар и собачка, гуляющая по краю блока.
👍 - если было полезно
👉 @seniorFront | 1 428 |
