Задать вопрос
  • Изменение значения gap в зависимости от ширины экрана (адаптив) через миксины?

    Ankhena
    @Ankhena Куратор тега CSS
    Почитайте про clamp https://developer.mozilla.org/ru/docs/Web/CSS/clamp
    К этому миксину не имеет отношения, но вам понравится.
  • Почему не работают падинги?

    Ankhena
    @Ankhena Куратор тега CSS
    Mark321, обычно ставят многотичие с помощью text-overflow ellipsis или js'ом или прилетает с бэка.
    Хорошо бы ещё пользователю намекнуть, что нужно сделать, чтобы увидеть остальной текст.
    Причем, не забыть пользователей без мышки и читалки.
  • Почему не работает inline-block?

    Ankhena
    @Ankhena Куратор тега CSS
    Front-Den, пользуйтесь валидатором https://validator.w3.org/nu/
    Почините разметку, всё получится.

    В современном мире блоки выстраивают с помощью флексов и гридов.
    Конечно, обязательно нужно научится делать это и инлайн-блоками и всеми другими способами, чтобы понимать что происходит.

    Это .promo .promo_text избыточные селекторы. Достаточно просто .promo_text.
    И в аналогичных случаях.

    <div class="waiting_divider"></div> если вам хочется вставить пустой тег в разметку, то с очень большой вероятностью, вы делаете что-то не то. Если так поступает автор курсов, то вы точно делаете что-то не то.

    Почему-то я думаю, что вы смотрите не совсем свежие и не вполне качественные (судя по селекторам и дивайдерам) курсы.
  • Почему не работают падинги?

    Ankhena
    @Ankhena Куратор тега CSS
    Mark321, чтобы обрезался, нужно использовать overflow: hidden.
    Чтобы остались отступы, нужна доп обертка или имитация отступов с помощью, например, бордеров.
  • Почему не работают падинги?

    Ankhena
    @Ankhena Куратор тега CSS
    А куда должен деваться текст, который не поместился в ваши 112px?

    как это исправить, подскажите пожалуйста

    Убрать ограничение по высоте.
  • Как узнать о переполнении?

    Ankhena
    @Ankhena Куратор тега CSS
    Дмитрий, не усугубляйте ))

    И давайте так: вы расскажете всю задачу и мы попробуем помочь вам найти к ней то самое изящное или признаем, что кроме банального сравнения размеров делу не помочь :)
  • Что делать с таким фоном?

    Ankhena
    @Ankhena Куратор тега CSS
    IIIu6ko, так и делать. Взять картинку, поверх наделать градиентов.
    Можно собрать все кругляхи в одну SVG, но если там много блюра, то браузер может быть недоволен.

    Только не забудьте убрать clip-content с оберток в фигме, чтобы ничего не обрезалось. А потом отредактируйте фрейм так, чтобы он был симметричен относительно центра, а по верху обрежьте по верху страницы.
  • Как узнать о переполнении?

    Ankhena
    @Ankhena Куратор тега CSS
    Дмитрий, да вы не огрызайтесь. Никто же не запрещает использовать костылики. Все время от времени городят черти что в коде.

    Но возможно есть и более изящные и быстрые способы...

    Особенно, если эти костылики кажутся вам изящными.

    Простите, хотела удержаться, но не смогла :)
  • Как узнать о переполнении?

    Ankhena
    @Ankhena Куратор тега CSS
    Дмитрий,
    найдя этот пример, я просто собирался прочитать у родителя свойство bg (ну или другое) через getComputedStyle

    знатный костыль
  • Как узнать о переполнении?

    Ankhena
    @Ankhena Куратор тега CSS
    Дмитрий,
    какое это имеет значение?

    На этом сервисе полно спрашивающих не в состоянии идентифицировать проблему. Т.е. им кажется, что они не могут справится с какой-то проблемой. А на самом деле, этой проблемы не было бы вовсе начни они решать задачу другим способом. В вашем случае это могла бы быть задача многострочного text-overflow ellipsis или просто overflow или что-то аналогичное.

    Ваша проблема решается на js путем сравнения двух (или четырех, в зависимости от верстки) размеров.
    Либо с помощью IntersectionObserver (подходит ли для вашей задачи тоже зависит от верстки) https://habr.com/ru/post/494670/
  • Как при наведении курсором на изменять цвет сразу у двух?

    Ankhena
    @Ankhena Куратор тега CSS
    newokek, удачи в изучении :)
    Не забывайте про семантику и доступность.
  • Как узнать о переполнении?

    Ankhena
    @Ankhena Куратор тега CSS
    Существует ли лаконичный способ идентифицировать переполнение блока содержимым?

    Смотря зачем
  • Как прописать значения для .container,чтобы все правильно отображалось на больших экранах тоже?

    Ankhena
    @Ankhena Куратор тега CSS
    Ну а как это будет отображаться на Full HD или 4K?

    Самое разумное спросить у дизайнера или заказчика.
    Часто просто текстовый вопрос не приносит результата, поэтому имеет смысл показать пару картинок.

    Просто хочу узнать как верно сделать.

    Универсального ответа не существует.
    Какие-то дизайны рассчитаны, чтобы растянуться/масштабироваться/адаптироваться на 8к, а каким-то это противопоказано.

    max-width: calc(1320px - (40px * 2));

    Если это не кастомные свойства, то лучше поставить уже посчитанный размер, а не заставлять браузер считать это каждый раз. А в комментарии написать как это значение получилось.
  • Как выровнять список ul относительно маркеров ("::before")?

    Ankhena
    @Ankhena Куратор тега CSS
    Corepro, псевдоэлементы по умолчанию имеют display: inline, а значит у них не работают размеры и горизонтальные отступы. Вертикальные margin тоже не работают, а padding работает не так, как в основном ожидают люди.

    Позиционировать их можно как inline-block, абсолютами, флексами или гридами.

    При использовании флексов или гридов, нужно либо оборачивать контент в дополнительную обертку либо точно быть уверенным, что в тексте нет и не будет никаких тегов (типа br, span, strong и т.д.)

    Удобнее манипулировать положением и размерами галки, если она будет фоном, а не написана в content.
    А content оставить пустым. content: ""

    ---
    Не очень четко описано, какого эффекта нужно добиться. Чтобы было как на скрине или чтобы текст шел по красной линии?
  • Не работают отступы у кнопок на IOS браузерах. В чём можеть быть дело?

    Ankhena
    @Ankhena Куратор тега CSS
    Проверила на 15 - работает.
    Может, кеш?

    Но в любом случае:
    - Невалидный код может работать как угодно, даже если невалидные куски не касаются напрямую проблемного места.
    - Кнопки удобнее делать тегом <button>. Input - устаревший вариант и не так удобно стилизуется. В сафари может иметь сложности с line-height.
  • Стилизация списка li?

    Ankhena
    @Ankhena Куратор тега CSS
    Corepro,
    я не понимаю как вставить ровную галочку

    Ровная галочка вынимается из вашего макета в формате SVG и вставляется фоном в псевдоэлемент.
    сделать background белыйл.

    эммм... так и сделать
    background-color: white
    для того же псевдоэлемента.

    Если совсем беда, экспортируйте из макета вместе с кругляхом.
  • Возможно ли реализовать такую сетку grid?

    Ankhena
    @Ankhena
    ForSureN1, почему это неправильно?
    Первый большой блок - первый из десяти, 10n-9
    Второй - восьмой из десяти, 10n - 2

    Ну или в плюс
  • Возможно ли реализовать такую сетку grid?

    Ankhena
    @Ankhena
    Возможно ли реализовать такую сетку grid?

    Конечно.

    Получается только вот такое

    Потому что в последовательности в образце 10 элементов, а вы пляшете от 7n
  • Как сделать фильтр товаров с помощью javascript?

    Ankhena
    @Ankhena Куратор тега JavaScript
    и у каждого блока можно добавить любой атрибут со значением

    Вот и добавляйте им data- атрибуты с указанием категории.

    как сделать фильтр товаров через чекбокс, чтобы можно было выбрать несколько вариантов:

    Чекбоксы как раз и позволяют выбирать несколько вариантов.

    Дальше на js сравниваете атрибуты у чекбокса и ссылок.

    В теории можно и на CSS с помощью соседних селекторов и селекторов по атрибутам нагородить огород. Но это плохо масштабируемый вариант.