Ответы пользователя по тегу Вёрстка
  • Как поставить png/jpg картинку в качестве фона svg?

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

    ArsenyMatytsyn
    @ArsenyMatytsyn
    CEO iAmStudio, предприниматель.
    Туты и прочая лабуда рассчитана на новичков, так как содержит общую информацию, которую можно хоть как-то систематизировать и продать. Курсы туда же.

    Чтобы профессионально расти в идеале надо прибиться куда-то, где старший будет тебе ментором. Речь о найме, т.к. в работе ты растешь. Либо ставить перед собой растущие цели и реализовывать их, как пет-проджекты или просто дейлики.

    В принципе можно объединить оба кейса.
    Ответ написан
    Комментировать
  • Текст выстраивается в одну линию в блоками. Как исправить?

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

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

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

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

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

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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    CEO iAmStudio, предприниматель.
    Используй гриды в логике
    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
    CEO iAmStudio, предприниматель.
    Чтобы можно было реализовать данную логику, инпут должен находится:
    1. Выше (раньше) последующего кода.
    2. На том же уровне или выше (вложенности).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn
    CEO iAmStudio, предприниматель.
    1. Дизайна нет в принципе. Это тупо набор каких-то элементов, которые не связаны друг-с-другом.
    1.1. Дурные анимации, мечта эпилептика.
    1.2. Качество графики — отвратительное, хотя можно было это исправить. Точнее не доводить.
    2. Нелогичные переходы.
    3. Не интуитивный интерфейс.
    4. Слабая верстка.
    5. Роуты плывут по бороде.

    Резюме — как первый опыт чего-то там сойдет, но такое людям не показывают.
    Ответ написан
  • Как реализовать данный блок?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    CEO iAmStudio, предприниматель.
    SVG, прокачанный на математических расчетах.
    Ответ написан
    2 комментария