Задать вопрос
  • Как растянуть 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;
    Ответ написан
    Комментировать
  • Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    1. Их может нарисовать дизайнер.
    2. Их можно взять из любого фреймворка или статистики.
    3. Можно (и хорошо бы) добавлять там, где ломается конкретный дизайн.

    чтобы упростить написание стилей?

    Так не выйдет, каждый дизайн разный (ну если работать с хорошими и разными дизайнерами, а не под копирку), также браузер может быть открыт на произвольную ширину, особенно на больших мониторах.
    И нет смысла, например, ждать увеличения до 768, когда уже на 600 можно показать следующую версию, если конкретный дизайн это позволяет.

    Но можно упростить и сократить за счет относительных единиц измерения, calc, функций clamp, min, max, а также родных свойств флексов и гридов.

    Также поможет использование препроцессорных переменных. Делаете как-то так (значения от балды на основе какого-то из проектов):
    $elg: 1526px;
    $lg: 1000px;  
    $md: 720px; 
    $sm: 540px; 
    $esm: 360px;

    Количество может меняться в зависимости от проекта.
    И используете в media.
    @mixin sm {
      @media (min-width: variables.$sm) {
        @content;
      }
    }
    
    @include sm {
      //some
    }

    При переходе в новый проект, смотрите макет и меняете переменные.
    Ответ написан
    Комментировать
  • Как растянуть элемент на всю высоту скролла body?

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

    указывал для фона и 100% и 100vh

    vh вообще не имеют отношения к ширине.

    Если всё таки речь про высоту, то 100vh очевидно не поможет, потому что это размер вьюпорта, а не контента body.
    А вот 100% поможет. И cover тоже поможет.
    Но для этого, body не должно быть ограничено вьюпортом или чем-то ещё.
    Обычно для body задают min-height: 100vh или развлекаются с процентами от html. Но это делают для эффекта липкого футера.

    Самое интересное, что по умолчанию body как раз таки растягивается по высоту контента. И соответственно, фон со 100% или cover поступит аналогично (если он не svg, у svg ещё нужно разрешить изменять пропорции).
    Так что ищите где перемудрили.
    Ответ написан
  • Нет вкладки "Design " в фигме. Как её добавить?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    Сделайте свою копию проекта и в ней будет возможность редактирования
    Ответ написан
    1 комментарий
  • Как наложить друг на друга два элемента с ::before?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Сначала нужно узнать, зачем для этого два элемента div и button. Достаточно одной кнопки. Если что, у неё есть два псевдо. В вашем случае не видно зачем второй псевдо.

    Но в современном мире эта задача легко решается вообще без псевдо с помощью background-origin
    https://sitist.ru/gradient-border.html
    Ответ написан
    4 комментария
  • Почему нет нормальной работы с svg в css?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Есть.
    Практически все способы вставки svg в html не позволяют менять цвет при помощи css.

    При вставке в разметку вообще нет проблем менять цвет.
    fill: red;
    stroke: green;

    и т.д.
    Альтернативный вариант, а разметке задаем в заливку или обводку currentColor, в CSS меняем свойство color.

    Ещё один - использование кастомных свойств.

    При вставке прямо в CSS
    Маски и фильтры.

    mask: url(img.svg) no-repeat center / contain;
      background: red;
      
      &:hover {
        background: green;
      }


    Один из вариантов - инлайнить SVG прямо в CSS (в кастомные свойства, чтобы не мусорить в селекторах).
    Другой вариант - собираем стек из SVG и используем в url в маске.

    Собственно, стеки можно использовать где угодно, в отличие от устаревшего спрайта.
    https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
    Ответ написан
    3 комментария
  • Как узнать что это за приложение?

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

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

    <ul class="header__nav">
        <li class="nav__item">
          <a class="nav__link nav__link--favorites" href="">
            <span class="visually-hidden">Избранное</span>
          </a>
        </li>
        <li class="nav__item">
          <a class="nav__link nav__link--profile" href="">
            <span class="visually-hidden">Профиль</span>
          </a>
        </li>
        <li class="nav__item">
          <a class="nav__link nav__link--card" href="">
            <span class="visually-hidden">Корзина</span>
          </a>
        </li>
    </ul>


    .header__nav {
      display: flex;
      gap: 42px;
    }
    
     .nav__link {
      display: block;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      background-color: rgb(246, 246, 246);
    }
    
    /* доступно скрываем текст */
    .visually-hidden {
      position: fixed;
      transform: scale(0);
    }

    И в модификаторы пишете фоны для модификаторов ссылок. Или для их псевдоэлементов, как удобнее.

    Если с псевдо, то либо делаем их инлайн-блочными и vertical-align: top; и дописываем сcылкам
    align-content: center;
    text-align: center;


    либо ссылки делаем флексами и стандартно
    display: flex;
      align-items: center;
      justify-content: center;



    https://jsfiddle.net/wav1q8kr/
    Ответ написан