Ответы пользователя по тегу Вёрстка
  • Как правильно по доступности верстать презентационные бэкграунды через тег picture?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    aria-hidden
    ну и tab-index чтоб не фокусилось, если фокусится
    ---
    но это очень не удобно для вывода полей через админку

    А ещё можно просто прописать ссылку на картинку в css переменную в инлайн стилях, а на css уже в медиа указать какую переменную использовать.

    Что-то вроде (увидеть смену картинки можно прямо тут, открыв код HTML или CSS - отработает медиазапрос):
    Ответ написан
    2 комментария
  • Как правильно сверстать сайт, на котором хедер и первый блок сделан одной картинкой?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Не сделан тут Header и первый блок одной картинкой. Просто у header нет фона и он спозиционирован поверх блока с фоном, например, через position: fixed, либо располагается внутри него:
    .hero background-image: url()
      header


    P.s. hero screen - паттерн, когда первый экран на весь экран, и, как правило, вместе с шапкой.
    Ответ написан
    Комментировать
  • Как сделать. чтоб было ровно?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    использовать подходящий HTML элемент - table.

    Ну а если религия не позволяет, то css grid
    Ответ написан
  • Как сделать стрелку двух линий с помощью css?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    google: chevron css
    Ответ написан
    1 комментарий
  • Как вложить в тег li изображения и еще список и подзаголовок?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Тут всё зависит от контекста.
    Если эти 4 блока между собой связаны, то есть демонстрируют некоторое перечисление, и можно их представить в виде плоского списка\перечня элементов, то да, СЕМАНТИЧЕСКИ более правильно сделать это списком.
    Внутри li можно размещать практически какую угодно информацию.
    При этом, на деле очень много кому семантика не важна и сделать дивами - тоже ок. Зависит от требований продукта и степени клиентаориентированности.

    Соответственно, если эти 4 блока никак между собой не связаны, просто 4 слуайных элемента с разной информацией, о разном, никак не объединяются под какую то общую сущность, типа "меню" \ "сегодня в кино" \ "товары" \ "наши особенности" \ "контакты" и так далее - то можно и дивами.

    НО, мне утверждают что это неверно! Что надо эти 4 блока сделать как блок ul, в котором будут 4 элемента li

    Ну и когда Вам кто-то что-то утверждает, то спрашивайте аргументацию, ознакомьтесь с этой аргументацией и сделайте вывод. И только если Вы с ней не согласны, имеете свои контр аргументы, тогда можно пойти и задать вопрос на суд сообщества.
    Ответ написан
    1 комментарий
  • Экспорт изображений из figma в 1x или 2x?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    1. Нет понятия правильно и не правильно. Есть то, что соответствуют задаче, и остальное.

    2. Это делают не для 4к разрешения, а для мониторов с большей плотностью пикселей. Например, ретина экраны. Но современные десктоп мониторы уже тоже с так называемой одинарной плотностью редко встречаются. Таким образом, для мониторов с маленькой плотностью пикселей загрузится картинка х1, для остальных х2. Таким образом, на мониторах с большей плотностью пикселей картинка сохранит свою чёткость, а не поплывёт.

    3. В идеальном мире Вы должны отдавать пользователю и х1 и х2 в зависимости от его девайса. Ибо зачем пользователю с х1 экраном грузить более тяжёлую х2 картинкку? А так же в нескольких разных форматах (с помощью picture). Например, jpg, webp, avif (браузер загрузит тот что поддерживает). Итого получаем 2*3 = 6 экземпляров одной картинки. А раз наш мир в этом пункте идеальный, то для разных разрешений ещё и разные картинки отдавать, которые больше под это разрешение подходят. Например, обрезают лишнее и сохраняют фокус на важном. Тогда, скажем, возьмём ещё 3 разрешения, получаем 18 экземпляров одной картинки :-) Но, конечно же, даже в идеальном мире, такое делать желательно только с тяжёлыми, размером больше "среднего" и контентно значимыми изображениями.
    Ответ написан
    Комментировать
  • Это работает по принципу dropdown (выпадающие списки / меню), как правильно верстать или загуглить?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    1. dropdown это сам выпадающий блок, как правило с абсолютным позиционированием или относительно родителя. На картинке - accordion (причём dropdown может быть частью accordion. В dropdown показывается контент, а над ним элемент активатор)
    2. Не существует правильной или не правильной вёрстки. Есть вёрстка, которая отвечает требованиям и которая не отвечает.
    3. Ну а так, есть примеры "от w3c" как верстать разные ui элементы с хорошей доступностью. Например https://w3c.github.io/aria-practices/examples/acco...
    Ответ написан
    Комментировать
  • Как правильно добавить стрелочку?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Смотря какую стрелочку, но, в целом, через ::after псевдоэлемент.
    Либо вставить в саму ссылку.
    Ответ написан
    2 комментария
  • Как расположить блок header абсолютно, но при это он не должен растягиваться по высоте на весь экран?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Ну так а зачем Вы всем элементам через * задали bottom: 0?
    Ответ написан
  • Как научиться разделять сайт на блоки при вёрстке?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Как научиться при верстке разделять макет на блоки правильно

    С опытом, либо пройти курсы\чтобы кто-то научил.

    все делают как будто по-разному.

    Так и есть. Нет единственно правильного. Есть некоторые требования, есть рекомендации. Но бизнесс-требования\специфика проекта могут способствовать тому, чтобы многие из них нарушить, так как в них нет надобности. Например: есть требование не больше одного h1 на страницу. На главной странице Яндекса их на каждый раздел по одному. Потому что главной странице яндекса пофиг на индексацию в поисковых системах.

    Если я сам буду размечать макет, то, наверно, будет много косяков

    Да, так и будет. Но не ошибается тот, кто ничего не делает.

    правильно ли я разметил этот макет или нет

    В целом нормально. Только aside - не aside. Пусть название тэга не вводит Вас в заблуждение. Он не для боковых меню.

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

    Ключевое слово - косвенно.
    Баланс косвенно связан с остальным контентом? Вроде нет.
    Quick links напрямую связаны, как и форма.

    Ну и разделение у Вас пока только на макро сущности. Дальше каждая из них делится на микро сущности - блоки. А блоки на элементы.
    Ответ написан
    4 комментария
  • Как считать слайды по одному при том что в slick стоит slidesToScroll: 4?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Округления вверх нужны для нечётных комбинаций
    Ответ написан
    1 комментарий
  • Как сверстать такое меню?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Если Вам нужно чтобы заливка обрезалась по дуге с картинки, то бы сделал как-то так:
    header, внутри которого nav.
    Задал бы хедеру логотип(с вот этой дугой вметсе) фоновой картинкой, а на основную высоту логотипа задал бы padding сверху. Соответственно, спозиционировал бы правильным образом фоновую картинку с помощью background-position: center top XXpx; (где XX это вот тот зазор сверху между логотипом и самым верхом страницы, пикселей 20 на глаз)
    Ну а теперь самое интересное.
    Обрезал бы nav с помощью clip-path, в соотвествии с розовой линией, указав клюевые координаты, чтобы было плюс минус-дуга. При этом крайние координаты указывал бы в процентах, что позволит nav расти вниз, при добавлении ссылок.
    60b7da23d545a607927710.jpeg

    UPD: мне стало интересно и я решил набросать простенькую демку по описанному выше. Правда картинку выбрал по сложнее :-)
    Откройте в новой вкладке и сделайте ширину в 768пикселей, чтобы более менее адекватно выглядело(хотя тут в фрэйме тоже пойдёт).
    Более плавной дуги можно достичь увеличением количества точек в полигоне. В этом может помочь иллюстратор.
    Можно нарисовать этот полигон прямыми линиями в нём, экспортировать в свг, а потом посмотреть оттуда координаты точек.
    Ну а для более лёгкого адаптива точки нужно рисовать в процентах, а не пиксилях.
    Ответ написан
    Комментировать
  • Как сверстать эти хар-ки?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
  • Почему блоки не принимают ширину?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Потому что Вы ограничили родительский контейнер по ширине и не разрешили переносы на новую флек-строку. Элементы пытаются в нём уместиться как могут.
    flex-shrink: 0 для modelA-kit решит вопрос.
    Ответ написан
  • Как сверстать сетку фотографий в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://masonry.desandro.com/

    Ну а вот подробная статья что можно получить сегодня другими методами (без js)
    https://habr.com/ru/post/526008/
    Ответ написан
    2 комментария
  • Как сделать фоновое изображение для текста?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    с помощью -webkit-background-clip: text;

    Но не очень широкая поддержка.

    Либо с помощью свг:
    css.yoksel.ru/svg-masks
    https://habr.com/ru/post/349362/
    Ответ написан
    Комментировать
  • Как правильно именовать секции при проектировании сайта?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Блоки могут быть разного уровня абстракций.
    • Если это какой-то переиспользуемый блок, внутри которого может быть разное содержимое, скажем, разметка слайдера, в котором могут быть как новости, так и товары - то да, такое именование не корректно.
    • Если это страница для какой-то cms то тоже будет не совсем корректно, так как контент любой секции в любой момент может поменяться.
    • Если это лэндинг, который сверстал и забыл - то ок.

    Если у Вас возникает ситуация. когда именуете заголовки так:
    services__title, about-us___title
    то значит Вы используете приём миксования из бэма. Но это высказывание корректно только если у Вас заголовок имеет такие классы:
    .title.services__title - основные стили в title, в services__title стили, которые присущи заголовку только в этом блоке. Например, внешние отступы.
    Ответ написан
    Комментировать