• Как сделать интерактивную карту?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    SVG и только SVG.

    Ну, можно, конечно, делать всякие абсолютно позиционированные прозрачные блоки на HTML, но там это сложнее позиционировать в силу отсутствия viewBox, как у SVG.

    Кроме того, блоки на HTML не могут иметь произвольную форму, а только прямоугольную (clip-path не в счёт, с ним ещё сложнее будет реализовать), что вызовет проблемы при совмещении нескольких объектов произвольной формы вместе. Точнее, будет проблема с зоной взаимодействия этих объектов при наведении мышки из-за наложения прямоугольников.

    Все такие интерактивные карты делают с помощью SVG, что как бы намекает.

    https://medium.com/@mattcroak718/creating-an-inter...

    Я делал такую карту с помощью Boxy SVG:
    https://boxy-svg.com

    Можно делать в Inkscape, там тоже есть режим просмотр кода разметки.
    Ответ написан
    Комментировать
  • С чего начать веб-дизайн?

    pospelov
    @pospelov
    Руководитель веб-студии
    Макет (!!!) всегда 1920 по ширине.

    Лучше сразу учиться использовать бутстрап-сетку (погуглите), сэкономите себе пару лет.
    Сетки готовые есть в интернете, можете мне написать, дам свою сетку, которую часто использую. За ее правильное использование вас будут воспевать от Калининграда до Хабаровска все, и верстальщики, и менеджеры проектов, и клиенты.
    5c10d5fbe2e0a507683185.png

    Размер шрифтов - для заголовков от 20 до 35 пикселей.
    Для текста - от 14 до 16 (не больше!)
    Ответ написан
  • Качество специально уменьшеной картинки — самообман?

    Попробуйте уменьшать шагами (сперва до 350х350, потом до 300х300 и т.п.). Дело в том, что при уменьшении неизбежно появляются искажения, т.к. изображение растровое. Если уменьшать пошагово, количество искажений можно свести к минимуму (связано с алгоритмом масштабирования изображений, причем чем меньше шаг, тем качественнее в итоге будет уменьшенный вариант). А в браузере механизм рендеринга (в первом случае, когда изображение 400х400) работает с не уменьшенной картинкой, что и обеспечивает более высокое качество.

    P.S. Также существуют специализированные программы для уменьшения изображений
    Ответ написан
    Комментировать