Ответы пользователя по тегу Вёрстка
  • Как не обрезать тень элемента, используя "overflow: hidden"?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Задача со звёздочкой, факт. В целом поддержу оратора — Сергей delphinpro. Добавлю, что неплохо бы после сделать отрицательный отступ, чтобы не было нерегулируемого смещения остальными блоками. Плюс можно поиграться с «разгоном» элементов следующего и предыдущего слайда, чтобы задать им пространство в рамках «ушей», чтобы тень не выплывала обрезанной.
    Ответ написан
    Комментировать
  • Как сверстать speech bubble?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Дешево и сердито — див с фоном + псевдоэлемент, который тоже имеет фон, наехать им с помощью позиционирования на сам див. Тут я бы обошелся без бордеров, т.к. стрелку тогда надо филигранно позиционировать.

    Компонент здорового человека — SVG.
    Ответ написан
    Комментировать
  • Как это сверстать?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Используй гриды для общей сетки макета, они позволят распределить контент по местам, и их же, гриды можно использовать для распределения блоков, основное удобство, которое они предоставят — свойство gap, которое даст управляемый зазор между карточками.
    Ответ написан
    Комментировать
  • Как поставить png/jpg картинку в качестве фона svg?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Для сложной формы да, SVG-маску, для кругляша хватит border-radius-а. Впрочем ничего не мешает сгенерировать SVG прямо в теле HTML. Как вставлять изображения в тело или в качестве фона — смотри спецификацию SVG.
    Ответ написан
    4 комментария
  • Текст выстраивается в одну линию в блоками. Как исправить?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Заверни все img в один контейнер.
    2. Если нужна система в отображении, то добавь грид.
    Ответ написан
  • Как сделать сетку изображений как в ВК?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Можно использовать да, заготовки под условия, или написать алгоритмы автоматической разбивки соотношения, и на выходе передавать это, допусти в качестве коэффициента flex-grow. Дальше на сегодняшний день полноценно поможет справиться object-fit.
    Ответ написан
    Комментировать
  • Это единственный разумный способ поднять цифры на 6пх выше?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Чтобы двигать элементы, выбивая их из потока можно использовать позиционирование или tranfrosm: translate....

    Для работы со строчными элементами, чтобы начали полноценно работать марджины, необходимо переводить их в состояние околоблочное, например inline-flex.

    Можно пользоваться отрицательными марджинами.

    Но конкретно в данном кейсе необходимо играться за счет:
    1. Тегов sup.
    2. Имитации тега с помощью vertical-align. Который позволяет использовать как символьные быстрые движения, как указал Aetae, так и пиксельные значения, процентные и т.д.
    Ответ написан
    Комментировать
  • Как с помощью flexbox расположить в ряд по 2-4 картинки?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Используя flex-wrap, минимальные и максимальные размеры, а лучше сразу перейти на гриды с их auto-fill и\или minmax размерах.
    Ответ написан
    1 комментарий
  • Как правильно сверстать такой блок?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    Руководитель frontend направления, предприниматель
    Используй гриды в логике
    grid-template-columns: calc((100% - 1200px)/2)) 3fr 7fr calc((100% - 1200px)/2))
    . Тогда пикче можно задать позицию grid-column: 1 / span 2, а тексту grid-column-end: span 1.

    Шаманские танцы с позиционированием это атавизм прошлого.
    Ответ написан
    1 комментарий
  • Как обратиться по классу от input[radio]?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Чтобы можно было реализовать данную логику, инпут должен находится:
    1. Выше (раньше) последующего кода.
    2. На том же уровне или выше (вложенности).

    И так, как это геморройно, проще реализовать на JS. Такие приколюхи с селекторами уместны для стилизации чекбоксов и радиокнопок, а не тут.
    Ответ написан
    Комментировать
  • Как сделать сдвиг элемента списка относительно предыдущего?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Ко всем прочим решениям, это типичный вложенный список (не обязательно, но смещение это прямо их родное). https://codepen.io/i-am-studio_ru/pen/yLJMOvx к родным отступам все что нужно — скорректировать отступы. В качестве бонуса позволит вкладывать очень долго)
    Ответ написан
    Комментировать
  • Как сверстать шапку если логотип посередине?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Можно сделать грид сетку для шапки, где будет 3 колонки (auto [ширина лого] auto), где навигация будет занимать с первой по последнюю колонку первой строки. А лого будет занимать вторую колонку. Схему же навигации повторить, чтобы образовалось негативное пространство под лого, где оно должно быть.

    Скорее всего потребуется пошаманить с событиями мышки (это описывается на уровне CSS), снимая отлов событий с контейнеров элементов и присваивая их вложенным.
    Ответ написан
    Комментировать
  • Как верстать такие "чудо" макеты?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Enlish club это, бесспорно, круто.
    2. Бутстрап не панацея и не надо пытаться под него все подогнать.
    3. Применяй mobile-first подход + бэм (номер и позиция «листка» более чем легко описываются модификаторами).
    4. На десктопе делай либо абсолютное, либо гриды.
    5. Декоративные рисульки можно как фоновой картинкой (которой на мобилке быть не должно, ну или должна быть другая), но лучше спозиционировать их относительно блоков-пунктов.
    6. Со стрелками и пунктирными линиями да, придется заморочиться, но так как это все же секция, которую врядли будут по контенту дергать каждый день, то рассчетами можно пренебречь и задать проценты и соотношения. Ну и SVG для упрощения жизни.

    В целом ничего сложного, просто достаточно много надо описать, относительно, если бы был какой-то типовой нахрен приевшийся блок.
    Ответ написан
    Комментировать
  • Как конвертировать SCSS в SASS с сохранением комментариев?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Sass принимает в себя стили, написанные на SCSS при импорте. Поэтому можно спокойно импортировать все и редактировать выборочно при необходимости.
    Ответ написан
    Комментировать
  • Как сверстать такой слайдер?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Пишешь сам, манипулируя, например, на уровне nodeElement-s.
    1. Берешь готовый скрипт, скажем owl\slick и допиливаешь напилником стили.
    2. Радуешься.
    Ответ написан
    Комментировать
  • Как правильно верстать(структура css)?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Я не очень понял, что за структура, отдельные стили для каждого медиазапроса чтоль? Но да не суть.

    1. Первым делом должны быть описаны общие стили для блоков. Без медиазапросов. Многие объединяют это с мобильными стилями, а потом переопределяют. Можно и без переопределения сделать.
    2. Повышаешь запросами «от» (min-width) вьюпорта, тогда переопределяется то, что изменяется, остальное входит в пакет.

    И оптимально все это делать в пропроцах, описывая медиазапросы прямо в описании блока, чтобы все было распределено по читаемой структуре. На уровне разработки, конечно.
    Ответ написан
    Комментировать
  • Как расположить картинки в не стандартном порядке?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Абсолютное позиционирование или гриды, или 2 колонки со смещением. В общем вариантов есть.
    Ответ написан
    Комментировать
  • Как оценить верстку со стороны нетехнического специалиста?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Без минимального набора технических навыков, а они есть не всегда даже у начинающих разработчиков, определенно нет.

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

    Да и в целом ждать качества от фриланса такое себе. Это «место» где происходят быстрые сделки за пару тыщ (грубо, но как-то так). Что можно сделать за час, два, десяток? На самом деле очень много, но если ты уже в потоке и знаешь что куда.
    Ответ написан
    Комментировать
  • Как грамотно составить класс container?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Параметры контейнера целиком и полностью зависят от макета проекта. От его breakpoint-ов, сетки и отступов. К примеру, с какого ляда у него отступы по 10px? От чего это зависит? В бутстрапе и иже есть хоть .row, который как раз отыгрывает этот отступ. А тут он зачем? Чем он обоснован? Есть ли эта логика в макете?

    Порой дешевле сделать почти как WapSter, но проще:
    .container {
        max-width: 1200px;
        width: 100%;
        margin: auto;
    }


    Все попытки сделать универсальное обречены на провал. Все, чему надо следовать — здравому смыслу и макету.
    Ответ написан
    Комментировать
  • Как сделать не равномерную сетку из блоков div?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Ты можешь задать размеры в соотношении на флексах, на простой и тупой блочной схема, на более подходящих гридах и использовать masonry-скрипт (не имеет смысла, если сделал на гридах). А уж абсолютно позиционировать точно нет смысла, по крайней мере, пока не дойдешь до кирпичной кладки, там это за тебя скрипт сделает.
    Ответ написан
    Комментировать