CSS Боль
رفتن به کانال در Telegram
Канал @htmlacademy про сложные места CSS без магии и суеверий https://tml.io/cssbol. В каждом выпуске разбираем механику движков, показываем живые демо и даём проверяемые решения — чтобы непонятное становилось повторяемым.
نمایش بیشترروسيا420 507دسته بندی مشخص نشده است
588
مشترکین
-124 ساعت
+27 روز
+1330 روز
در حال بارگذاری داده‌ها
کانال‌های مشابه
هیچ داده‌ای
مشکلی وجود دارد؟ لطفاً صفحه را تازه کنید یا با مدیر پشتیبانی ما تماس بگیرید.
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '26
+22
در 1 کانال‌ها
سپتامبر '26
+8
در 1 کانال‌ها
Get PRO
اوت '26
+16
در 1 کانال‌ها
Get PRO
ژوئیه '26
+11
در 1 کانال‌ها
Get PRO
ژوئن '26
+4
در 0 کانال‌ها
Get PRO
مه '26
+11
در 1 کانال‌ها
Get PRO
آوریل '26
+33
در 2 کانال‌ها
Get PRO
مارس '26
+51
در 5 کانال‌ها
Get PRO
فوریه '26
+144
در 3 کانال‌ها
Get PRO
ژانویه '26
+224
در 5 کانال‌ها
Get PRO
دسامبر '25
+282
در 3 کانال‌ها
Get PRO
نوامبر '250
در 1 کانال‌ها
Get PRO
اکتبر '25
+2
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 28 اکتبر | +1 | |||
| 27 اکتبر | 0 | |||
| 26 اکتبر | +1 | |||
| 25 اکتبر | +1 | |||
| 24 اکتبر | 0 | |||
| 23 اکتبر | 0 | |||
| 22 اکتبر | +1 | |||
| 21 اکتبر | +1 | |||
| 20 اکتبر | +1 | |||
| 19 اکتبر | +2 | |||
| 18 اکتبر | 0 | |||
| 17 اکتبر | 0 | |||
| 16 اکتبر | 0 | |||
| 15 اکتبر | +1 | |||
| 14 اکتبر | 0 | |||
| 13 اکتبر | 0 | |||
| 12 اکتبر | +1 | |||
| 11 اکتبر | +2 | |||
| 10 اکتبر | +2 | |||
| 09 اکتبر | +3 | |||
| 08 اکتبر | 0 | |||
| 07 اکتبر | 0 | |||
| 06 اکتبر | 0 | |||
| 05 اکتبر | +1 | |||
| 04 اکتبر | +2 | |||
| 03 اکتبر | 0 | |||
| 02 اکتبر | +2 | |||
| 01 اکتبر | 0 |
پست‌های کانال
CSS Anchor Positioning: An In-Depth Visual Guide
Добавил часть про анимации в большой гайд по анкорам и перевёл его на английский.
Поделитесь статьёй со своими знакомыми фронтендерами-иностранцами. А можете и сами почитать и позалипать на анимацию.
https://htmlacademy.org/blog/anchor-positioning-in-pictures
→ опубликовано через smmtp://
| 2 |  بدون متن... | 468 |
| 3 | Большой визуальный гайд по CSS Anchor Positioning
От базовой привязки элементов до прикладных приёмов: создания прочных соединителей и цепочек якорей.
Собрали материалы нескольких месяцев работы в большую статью в формате "CSS-фича в картинках". Получилось больше 50 иллюстраций!
Теперь про Anchor Positioning можно и почитать, и поиграть.
https://habr.com/ru/articles/1092540/
→ опубликовано через smmtp:// | 1 606 |
| 4 |  Суперприёмы Anchor Positioning
В детстве мы играли в файтинги на денди (а мажоры на сегамегадрайве). И там были суперприёмы. В анкор позишнинге они тоже есть!
Суперприём #1 – прочная связь двух элементов
Один угол заякорённого элемента привязываем к первому якорю, противоположный угол — ко второму якорю. Готово. Связь будет сохраняться при перемещении связанных элементов. Визуально оформить связь можно фоном или рамками. Код:
.svyaz {
/* один угол связали с --a1 */
top: anchor(--a1 center);
left: anchor(--a1 center);
/* второй с --a2 */
bottom: anchor(--a2 center);
right: anchor(--a2 center);
}
Суперприём #2 – цепочки якорей
Один заякорённый элемент можно делать якорем для второго, а тот для третьего и так далее. Простор для творчества — гигансткий.
Этот приём напоминает мне школьную игру про "... дорисуй вагон другой".
Пощупать эти приёмы можно в очередном уровне игры про Anchor Positioning. Перед этим лучше пройти все предыдущие уровни.
→ опубликовано через smmtp:// | 1 826 |
| 5 |  ИИ становится пугающе сообразительным
Я не замечаю, что новые модели становятся всё умнее и приближаются к естественному интеллекту. Но вижу как они становятся сообразительнее, я бы сказал шаристее. И это иногда впечатляет.
Недавно дал астре абсолютно нетипичную для себя задачку. "А сможешь сделать вертикальный ролик?". Мол, сходи поиграй в мини-игру про гриды и сделай ролик. Тот ответил, что вообщше без проблем. И через 7 мин у меня был ролик, который вы видите.
То есть он сам сходил по адресу, поиграл, разобрался как работает игра, посмотрел задачки, выбрал самые интересные с его точки зрения, наскриншотил, сложил в папочку.
Потом написал сам себе сценарий и скриптик, по которому собрал ролик. Да, это не покадровая ИИ-генерация, это алгоритмическая генерация. Но сделанная полностью автономно.
В общем новые модельки меньше тупят и лучше соображают. И это прикольно
→ опубликовано через smmtp:// | 392 |
| 6 |  Какую же красоту можно делать с Anchor Positioning
Это просто промежуточный этап работы | 416 |
| 7 |  anchor() – царица якорей
Функция anchor() живёт внутри большинства сложных демок и крутых приёмов, связанных с якорным позиционированием.
Простейший вид якорей:
1. anchor-name у якоря;
2. position-anchor + position-area у привязанного элемента.
Продвиутый вид:
1. anchor-name у якоря;
2. inset-свойства со значениями, содержащими anchor(), у привязанного элемента.
Например:
.anchor {
anchor-name: --a1;
}
.target {
position: absolute;
left: anchor(--a1 right);
}
То есть элемент можно привязать любой стороной к любому якорю (да-да, элемент можно привязать сразу к нескольким разным якорям). А ещё можно использовать выражения с anchor(). Всё это даёт невероятную гибкость в выборе точек привязки и в позиционировании элементов.
Поисследуйте anchor() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования. | 1 764 |
| 8 |  Скругления в неожиданных местах
Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк.
Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc.
Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота.
P.S.: если в первый раз видите shape(), то начните игру с первого уровня | 1 856 |
| 9 |  CSS shape() — фича больших надежд
CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().
shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?
Но давайте посмотрим на текущий потенциал фичи:
— сложные формы контейнеров (с нормальной отрисовкой рамок),
— траектории движения для анимаций,
— просто обрезки,
— комбинирование с другими фичами (например с anchor-positioning).
Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.
P.S.: куда поместить навык работы с shape() в системе грейдов?
Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы? | 1 986 |
| 10 |  CSS Anchor Positioning
Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства.
Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.
Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.
Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества). | 1 802 |
| 11 |  Случайные испытания для демонстрации мастерства
Запустили сложный игровой режим Восхождение, в котором можно показать свой скил.
Суть режима:
1. Пройти уровень из 10 случайных испытаний выбранной сложности
2. Использовать во время прохождения минимум лишних ходов
3. По результатам определяется ступень мастерства
Есть 3 уровня сложности, по 3 попытки на каждый.
И если на простом уровне всё проходится левой пяткой, то на сложном реально приходится попотеть. На внутренних тестах лучший результат — 8 ступень из 9.
Теперь вам есть чем поразвлекаться в пятницу =)
P.S.: а анимация то какая прикольная получилась у портала.
https://htmlacademy.ru/skill-trials/conic-ascension | 528 |
| 12 | #ТяжелыйПонедельник #видеозаписи
Мы стоим на пороге революции в верстке, связанной с новым подходом — реактивным CSS. В нем привычная логика отображения «переезжает» из JavaScript в стили, и весь внешний вид компонента зависит от CSS-переменных состояния. В докладе, который открываем сегодня, спикер разобрал этот подход на постепенно усложняющихся примерах.
Александр Першин — Реактивный CSS
😉 YouTube | 📺 VK Видео | 552 |
| 13 | Опубликовали мой доклад про Реактивный CSS на весеннем HolyJS. Особенно прикольным получился третий пример про связку скролла с цсс-логикой. В нём у календаря-индикатора при прокрутке ячейки закрашиваются разными цветами.
Ну а мне как докладчику понравилась атмосфера в зале, хотя было утро второго дня конференции, самое тяжелое утро =) | 441 |
| 14 |  Треугольники на CSS
Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.
Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.
Cхема решения такая:
conic-gradient(
from 335deg
at bottom right,
transparent 0 25deg,
red 25deg
);
"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол.
Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку. | 2 357 |
| 15 |  Флексы или флоаты
Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.
Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям.
Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре | 1 798 |
| 16 |  Мифические измерения гридов
"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).
Никогда не понимал, что это значит. Признайтесь, у кого так же?
Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек.
Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area.
Поиграться с именованными областями можно в новом уровне грид-лего | 1 823 |
| 17 |  Лего-гриды
Гриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны.
Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология.
И если разбираться с гридами неспеша, с помощью красивых кубиков лего, то они почти не бесят.
Играть в новый уровень про гриды | 1 526 |
| 18 |  +1Продолжение мини-игры по CSS-фильтрам
Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!
Можно играть даже на мобильном.
👉🏻 Играть здесь | 1 454 |
| 19 |  +1Мини-игра по CSS-фильтрам
Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше.
Можно играть даже на мобильном.
Играть здесь | 1 603 |
| 20 |  Реактивный CSS всё ближе
Свершилось! В 151 Firefox завезли стилевые контейнерные запросы. Это значит, что сложная клиентская логика на CSS теперь доступна во всех основных браузерах. И доклады про реактивный CSS становятся всё более актуальными
Есть и ещё одна хорошая новость. За флагом добавили range синтаксис для сравнений:
@container style() range syntax queries: layout.css.attr.enabled
То есть Firefox в вопросах клиентской логики семимильными шагами догоняет Chrome. Для полной картины осталось добавить только if().
Детали релиза:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151 | 1 254 |
