Ответы пользователя по тегу HTML
  • Как правильно верстать wrapper?

    dom1n1k
    @dom1n1k
    Нет однозначного ответа. Все три варианта могут быть годными в зависимости от логики макета.
    Ответ написан
    Комментировать
  • Проблемка с градиентом через сanvas?

    dom1n1k
    @dom1n1k
    Подозреваю, что причина в известной канвасовской особенности координат - в ряде ситуаций, чтобы получить точный результат, нужно указывать не целочисленные координаты (границы пикселей), а добавлять/вычитать 0.5px (чтобы попасть центры пикселей).
    В данном случае главный подозреваемый - метод createLinearGradient.
    Ответ написан
    1 комментарий
  • Как выровнять высоту блоков div?

    dom1n1k
    @dom1n1k
    Флексами же.
    Ответ написан
    Комментировать
  • Как сверстать подобный заголовок?

    dom1n1k
    @dom1n1k
    Не надо верстать, надо двумя растровыми картинками, переключаемыми по медиа-выражению.
    Ответ написан
  • Как правильно по BEM создавать заголовки?

    dom1n1k
    @dom1n1k
    Сделать разные классы типа .rate__title, .goods__title, .review__title - нормально. Если у них есть общие свойства, их можно вытащить в миксин, оставив классы независимыми. Уверен, что у них будет что-то общее, но найдутся и различия. То есть совпадение не будет на 100%.

    Впрочем, вариант с миксованием универсального "заголовочного" блока тоже вполне норм (если они действительно одинаковые). Я как-то делал класс .heading с модификаторами вида .heading--1, .heading--2 и пр. Потому что как это ни дико звучит - визуальный уровень заголовка не всегда совпадает с его семантическим уровнем.
    Ответ написан
    Комментировать
  • Как сверстать этот элемент?

    dom1n1k
    @dom1n1k
    А просто сделать эту панель на всю ширину вьюпорта не?
    Не засовывая её в бутстраповский контейнер.
    А потом разбить на 2 половины, синюю и белую.
    Ответ написан
    4 комментария
  • Как верстать под мобилы макет на 750рх?

    dom1n1k
    @dom1n1k
    750 - это айфон 6-8 что ли?
    У них ширина 750 с учетом ретины, а в css-пикселях - 375.
    Ответ написан
    Комментировать
  • Как сверстать такой фон?

    dom1n1k
    @dom1n1k
    Ну только цельной картинкой, подложенной в фон. Работать будет, но:
    а) будет дофига весить
    б) нужно думать, как её лучше размножать или тянуть, если будет очень широкий монитор или очень длинная страница.

    В целом дизайн - полное г**но (не только из-за этого фона).
    Ответ написан
    Комментировать
  • Как сверстать такой интерактивный элемент?

    dom1n1k
    @dom1n1k
    Зачем эти полоски верстать? Чтобы что?
    Делать их частью картинки, текст поверх, да и всё.
    Как вариант, сделать бутерброд из 2 равновеликих картинок - квадрокоптер и все полоски.
    Это тот самый случай, когда мудрить нет смысла.
    Ответ написан
  • Почему различаются шрифты photoshop и браузера(Montserrat)?

    dom1n1k
    @dom1n1k
    Шрифт Montserrat не так давно обновлялся, и они там поменяли шкалу жирности. В репозитории на эту тему даже небольшой срач был:
    https://github.com/JulietaUla/Montserrat/issues/63
    Очень возможно, что шрифт в системе и веб-версия разных версий и действительно отличаются.
    Ответ написан
    Комментировать
  • Зачем разделяют дизайн и верстку?

    dom1n1k
    @dom1n1k
    Изрядная доля истины тут есть. И для небольших проектов, пожалуй, так и лучше - когда дизайнер сам же и верстает.
    Почему? Потому что качество верстки намного лучше. Потому что, если я рисовал этот блок, то я точно знаю всю его внутреннюю логику: откуда у меня взялся этот размер, откуда тот, почему то выровнено в этим, как должны соотноситься кегли шрифтов, как ведут себя отступы, если контент будет другого размера или вообще отсустствовать и так далее.

    Верстальщики, которые всё это сами видят и понимают... их единицы. Шанс встретить такого в реальной жизни примерно равен шансу отобедать с британской королевой.
    99% верстальщиков этого не понимают. В лучшем случае он будет попиксельно снимать размеры с макета и хардкодить их в стилях магическими константами, не понимая логики. В большинстве же случаев он сделает на глазок, а плавающие на плюс-минус несколько (и хорошо если не несколько десятков) пикселей отступы его не смущают. Самое удивительное, что многие программисты на эти погрешности даже не забивают, а искренне не замечают!

    Получается, что дизайнер должен к макетам написать пояснительную записку просто маниакального уровня подробности. С одной стороны это даже полезно - документация это всегд хорошо для будущих поколений. Но во-первых времени на её написание и поддержание актуальности уходит чертова прорва. А во-вторых, и это самое печальное, её все равно читают по диагонали.

    Для проектов больших ситуация иная - там просто физически не получится охватить и то, и то.
    Ответ написан
    Комментировать
  • Какой максимальный размер верстки?

    dom1n1k
    @dom1n1k
    Мониторы на 3440 и более пикселей никто не использует в родном масштабе - всё будет очень мелко. Ставят 150% или даже 200%, смотря по вкусу, зрению и задачам. Те мониторы изначально на это рассчитаны. Исключения, конечно, возможны, но это ппц какая редкость. Думаю, максимальная ширина (в css-пикселях), которую можно встретить в жизни - 2560.

    Адаптировать под неё верстку чаще всего (хотя и не всегда!) не нужно - будет слишком широко, ставят ограничение на ширину контента порядка 1400-1800.

    Но иметь его в виду всё равно нужно, чтобы не поймать багов типа неожиданно оборвавшегося фона, который должен быть на весь экран. Был у меня такой случай лет 8 назад - тогда даже 1920 ещё мало у кого были, а уж большее было из области фантастики. Но у заказчика внезапно оказался именно такой - и мой фон на 2000px обрезался по бокам.
    Ответ написан
    Комментировать
  • Какой %-поддержки по caniuse считаете приемлемым?

    dom1n1k
    @dom1n1k
    Зависит от того, что делает свойство и насколько серьезно оно способно поломать сайт.
    Для свойств, на которых держится вся верстка (гриды, например) нужно как минимум 95%. Для декора (скруглённые уголки, тенюшки) даже 50% вполне ок.
    Ответ написан
    Комментировать
  • Какой монитор выбрать по дюймам для работы в верстке и легкий дизайн сайтов?

    dom1n1k
    @dom1n1k
    1920 для комфортной работы уже мало, конечно. Советы про 27+ правильные. Но обычно всё в финансы упирается - тут уж каждый сам решает.
    Ответ написан
    5 комментариев
  • Как делать адаптивные галереи?

    dom1n1k
    @dom1n1k
    Там ключевой момент не во флексе, а в свойстве object-fit. Потому что идеально подобрать и упаковать разноформатные фото всё равно невозможно - по любому придётся их подрезать.
    Ответ написан
    Комментировать
  • Какой вариант HTML разметки лучше?

    dom1n1k
    @dom1n1k
    Не вижу ни одного достоинства у 2-го варианта. В чем смысл так делать?
    По скорости - 1-ый, очевидно, быстрее (тупо меньше элементов), но разница пренебрежимо мала почти всегда, за исключением особо клинических случаев.
    Ответ написан
    6 комментариев
  • Есть ли смысл подобное верстать?

    dom1n1k
    @dom1n1k
    Не стоит. Эффектов много. Повторить их в точности - можно, конечно, но долго и геморно. Код будет громоздкий. Убьется куча времени на отладку на разных устройствах. И всё равно какой-нибудь мобильный браузер покажет не так. Картинка тут вполне решает задачу.

    Разумеется, если заказчик уверен, что это нужно и готов оплачивать - делать. Но чисто с точки здравого смысла - не нужно.
    Ответ написан
    Комментировать
  • Как анимировать .css('backgroundImage') в jquery?

    dom1n1k
    @dom1n1k
    Напрямую это не сделать никак, потому что к фону нельзя применить opacity отдельно от самого элемента. И аналога прозрачности, как у цвета rgba, у картинок нет.
    Всё-таки нужен какой-то вложенный абсолютно спозиционированный элемент. Возможно img, возможно div с фоном, это не так уж важно. И вот уже он будет анимироваться.
    Ещё вариант - засунуть в фон canvas и рисовать что-то анимированное на нём... Но это выглядит неоправданно сложно.
    Ответ написан
    Комментировать
  • Как делать отступы между блоков в БЭМ?

    dom1n1k
    @dom1n1k
    Все блоки одновременно являются детьми некого вышестоящего контейнера. Отступы нужно указывать для классов, соответствующих элементам родительского блока. Далее эти классы могут быть прикручены либо непосредственно к обсуждаемым блокам, либо к промежуточным дивам-оберткам.

    Недавно отвечал на похожий вопрос:
    https://toster.ru/answer?answer_id=1080988#answers...
    Ответ написан
    Комментировать