Задать вопрос
  • Как выровнять крестик?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Почитайте про ascent-override, descent-override и line-gap-override

    Кроме как заменить на svg

    Но нужно понимать, что это самое адекватное решение.
    А ещё это, наверное, всё таки button, а не div. А x не её контент, а украшение. Контентом там должно быть что-то типа "закрыть окно". Хотя бы aria-label.
    Ответ написан
    2 комментария
  • Как лучше всего реализовать данный фон?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Старайтесь разделять смысл (разметку), украшения (стили) и поведение (скрипты).
    Кодгайд гугла
    Критерии верстки для первокурсников

    У фигуры довольно странные правый и верхний края. Либо древний макет либо косяк дизайнера.
    А полная резина, судя по этому куску макета, тоже не предусматривается.

    В идеале экспортируем пятно в том виде, в котором оно нужно нам, а не полное, как сейчас, если нет каких-то важных причин так не делать. Но пока на основе вашего пятна.

    Самый простой вариант: задаем фон для body и дорисовываем направо градиент.
    https://codepen.io/AnnaSummer/pen/WbQwNrE
    фон

    background:
      url(https://habrastorage.org/webt/68/75/69/687569cb9ee3a139342935.png) no-repeat top -100px left calc(50% + var(--container-width)/2 - 330px), 
       #ffffff  linear-gradient(#fff1da,  #fff1da) no-repeat top right / calc(50% - var(--container-width)/2) 773px;

    Тут использована ваша png. Если пятно берем отдельно, то экспортируем в svg, если слепляем с девушкой то png и image-set. Но может получиться сложнее с размерами.
    --container-width - ширина контейнера.
    Сдвиги - взяты с потолка, берите или вычисляйте из макета.
    Вместо дурацких компенсирующих сдвигов, я бы обрезала эту SVG до нужных размеров. Аналогичный эффект должен дать экспорт с включенной галкой clip content на нужном фрейме.

    В адаптиве перестраиваем по макету.

    Альтернативный вариант: использование псевдоэлементов в возможном сочетании с абсолютом, трансформом, гридами и единицами от контейнера. Но без ТЗ для широких мониторов, можно только угадывать.
    Ответ написан
    Комментировать
  • Как сделать такую фигуру на css?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Дорабатывайте под себя
    https://codepen.io/AnnaSummer/pen/BaGoKrE
    Альтернативы: маски, clip-path, svg
    Ответ написан
    Комментировать
  • Как правильно работать с background?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Чтобы не было, например, "обрезаний" при разных разрешениях экрана или "дополнения" пустых мест его дублированием


    Геометрия говорит нам, что если пропорции блока и изображения не совпадают, то возможны три варианта:
    - поля
    - обрезка лишнего
    - искажение пропорций

    Поскольку, без искажений пропорций из одного изображения так сделать невозможно, то остается один вариант - подгружать разные файлы.

    Но кроме пропорций, есть ещё поддержка форматов и плотность пикселей. Так что, сложность тут не одна.

    Какие размеры файла желательны (в байтах)?

    Минимальные. При этом нужно сохранять достаточное качество.

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

    Для ретины и разных форматов файлов используйте image-set
    Для разных размеров - @media
    Для оптимизации размеров - форматы webp, avif
    Ответ написан
    Комментировать
  • Как настроить перенос текста через максимальную ширину, как в html?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    Фикс размеры
    67f645d756e5b902308030.jpeg
    Левее - фикс ширина
    Ответ написан
    1 комментарий
  • Почему не центрируется текст?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Явно центрируется

    67ea4d32829dc332640816.jpeg

    даже с учетом опечатки в теге div

    2) Как применять маску таким образом что бы доминирующий цвет брался не из html,body ?

    Не очень понятно чего нужно достичь, но цвет берется из bg. Ни у кого кроме body его нет. Будет другой у items или item возьмется оттуда.
    Ответ написан
    Комментировать
  • Как решить проблему с прокруткой в инпуте?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Либо div contenteditable true
    Либо вниз псевдик от кого-нибудь с фоновыми клетками (гридом), например, от лейбла. Если лейбл со спаном с visually-hidden, то фон можно прямо лейблу.
    Ответ написан
  • Как растянуть html, body на всю высоту страницы, даже если есть прокрутка?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Заменить высоту на минимальную высоту или вовсе убрать.
    Ответ написан
    1 комментарий
  • Что делать если расположение текста находится не в том месте?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Обычно создают класс-хелпер и называют его container, wrapper или типа того.
    Ему задают ширину и центрирование.
    В верхней части шапки он у вас есть, а в нижней потерян.

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

    p.s.
    Называть классы словами down, bottom, red и т.д. не лучшая идея. Темы меняются, а блоки перестраиваются на разных размерах вьюпорта. Лучше придумывать названия по смыслу.

    p.p.s
    Если не хватает возможностей инструментов разработчика в браузере, для работы с сетками удобно использовать обводки для блоков. Полупрозрачный outline и отрицательный outline-offset.
    Ответ написан
  • Что делать, если не меняется цвет навигационных ссылок?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Да что ж такое.
    Я вам в прошлом вопросе написала тактику.
    Не меняются ссылки на цвет , который задал.

    Нет, не задали.
    Задали для nav, для ссылок - нет.
    Как решить проблему ?

    Задать.

    Также рекомендую начать пользоваться инструментами разработчика в браузере. Он отлично показывает что и почему применилось. У синей (или посещенной фиолетовой) будет написано user agent stylesheet, т.е. стили браузера по умолчанию.

    Ссылки не наследуют свойство color.
    Чтобы изменить цвет ссылки, нужно ей задать это свойство.
    Если нужно, чтобы она была такого же цвета, как родитель, то использовать значение inherit
    .nav a {
      color: inherit;
    }


    p.s. Для доступности меню верстают списком внутри тега nav.
    Ответ написан
    Комментировать
  • Как начать background-image с определенного места?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Ответ написан
    Комментировать
  • Какие есть варианты такого позиционирования элементов на странице?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Т.е. обёртку box2 удалять нельзя.

    В CSS есть display: contents для таких вещей.
    Остальное гридами.
    Ответ написан
    Комментировать
  • Не выставляются карточки с помощью gap так как надо?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Свойство gap работает не так как надо

    На обоих скриншотах одинаковый gap и по виду очень похож на указанные 30px.
    А больше он ничего не делает.

    Но предположим, что вы хотели спросить не про gap, а про почему не получилось два столбца.
    Теперь смотрим в код (было бы идеально, если бы к коду прикладывалась песочница, в которую можно потыкать, а эти простыни убирались в спойлеры).
    Вы пишете: хочу флекс, по строкам, если не влезло, то переноси и сделай отступы (этот ваш gap) 30px.
    Смотрим на элемент: ширина 555px.
    Смотрим на контейнер: ширина 1140 и отступы 2х15.

    Считаем:
    Свободное место в контейнере: 1140 - 30 = 1110.
    Сколько нужно места хотели бы занять два элемента в ряду: 555х2 + 30 = 1140
    => Не влезает.

    А раз не влезает, то переносим.

    Нормальное решение:
    Меняем флекс на грид и задаем две колонки с нужным отступом.
    grid-template-columns: 1fr 1fr;
    gap: 30px;


    Дополнительно можно почитать про minmax в гридах.
    Ответ написан
    1 комментарий
  • Не удается экспортировать файлы из Figma?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    Экспорт находится справа внизу

    spoiler

    67a8fe054720f437471428.jpeg
    Ответ написан
    3 комментария
  • Webstorm убирает табуляцию при форматировании?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    Do Not Indent Children Of
    https://www.jetbrains.com/help/webstorm/settings-c...

    Но вообще, хорошо, что удаляются отступы конкретно у этих тегов. Зачем вам сдвиг практически всего кода из-за вложенности в body?

    скрин

    67a7c0cbe0526614032646.jpeg


    p.s. за user-scalable=no и maximum-scale=1 отрывала бы руки.
    Ответ написан
    3 комментария
  • Как можно такое сделать?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Так, на коленке, но с адаптивом.
    Плохо, что вы не потрудились сделать хотя бы начальную песочницу с нужными шрифтами и размерами.
    Возможно, при исходном шрифте удастся избежать части костылей с переносами.

    https://codepen.io/AnnaSummer/pen/yyBrwyz

    Альтернативный вариант с использованием mix-blend-mode, но нужно подбирать цвета и эффекты

    https://codepen.io/AnnaSummer/pen/LEPoRLZ
    Ответ написан
    9 комментариев
  • Как сделать так, чтобы строки таблицы не растягивались?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    1. Добавить пустую строку с высотой auto, остальным задать фиксированную.
    2. Использовать display grid + subgridи соответственно, свойства грида.
    Ответ написан
  • Почему не работает псевдокласс not?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Простой Человек,
    Кажется и не получится

    Примечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill и stroke. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан 0, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited.

    https://developer.mozilla.org/ru/docs/Web/CSS/:visited
    Ответ написан
    5 комментариев
  • Возможен ли отступ только второй строки CSS clamp?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    За отступ первой строки отвечает text-indent.
    text-indent: -50px;
     padding: 50px;

    Только не ясно при чем тут line-clamp
    Ответ написан
    2 комментария
  • Можно ли уже использовать CSS-свойство text-wrap: balance?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Можно ли сейчас отказаться от подхода задания максимальной ширины

    От этого подхода нужно было отказаться всегда. Если вы имели в виду однотипные блоки и вашу попытку задавать им ширину в зависимости от контента "сейчас". Контент меняется.

    А также использую неразрывные пробелы для некоторых фраз.

    Это правильный подход.

    Т.е. лучше уж поставить br или span выполняющий его роль, чем фикс ширину для того, чтобы подстроить конкретный текст под блок. Если речь о каких-то дизайнерских моментах типа заголовков.

    Можно ли уже использовать CSS-свойство text-wrap: balance?

    Тут нужно начать с вопроса, а что будет если открыть сайт из браузера, который не поддерживает свойство.
    Что-то сломается? Нет.
    Т.е. это свойство работает наоборот: там где поддерживается, будет симпатичнее.

    p.s. и не используйте balance для блоков больше чем на 3-4 строки.
    Для длинных текстов text-wrap: pretty;
    Ответ написан
    Комментировать