Ivan Bogachev

Вариантов в целом много. Если пойти по пути псевдоэлементов с абсолютным позиционированием и аккуратного выравнивания, то получится что-то такое:

На сайте browserhacks.com вы найдете самые разные варианты проверок (как на CSS, так и на JS) на те или иные браузеры, в частности - Firefox там тоже есть.

Для квадратов с размером одежды - можно просто border сделать. Круги можно нарисовать с помощью radial-gradient() в фоне, без создания дополнительных элементов (чередуя цвет и прозрачность по мере удаления от центра).

В таких переключателях не так важно, как вы их сверстаете, важна доступность. И вот тут самая сложность и кроется. В этом маленьком компоненте нужно подумать про поддержку клаиатуры, подумать про то, что читалки должны понимать, что это radio-инпут и здесь что-то выбирается, ну и должны быть по крайней мере очевидные изменения во внешнем виде на :hover/:focus и выделение выбранного варианта. Последнее решается с дизайнером. А про первые два - полезно загуглить для своего развития, даже если ваш заказчик/начальник скажет, что "денег нет, но вы [пользователи с ограниченными возможностями] держитесь".

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

Проблема в том, что у вас дублируются id у элементов на странице.

С помощью градиентов можно нарисовать все, что угодно:

Ну и обычными картинками тоже можно, через border-image или так же, через фоны.

Все это строится на шейдерах в WebGL.

Первый пример очень похож на вот эту демку (лучше открыть в отдельном окне):


А вот найти готовое решение один в один как на какой-то гифке из сети очень сложно. Часто его не будет. Дизайнер концепт нарисовал, а на практике никто такое еще не запрограммировал. В такой ситуации - только руками писать. Советую почитать введение в программирование шейдеров для верстальщиков и посмотреть стримы Юрия Артюха (меня терзают смутные сомнения, что он когда-то делал эффект, как во втором вашем примере).

.main-header {
    overflow: hidden;
}

Подскажите как реализовать SVG интерактивную карту без использования обычной картинки. У многих в уроках используют картинку и поверх уже прописывают svg элементы. Я же хочу сделать полностью на svg фон и элементы к нему но вот не знаю как правильно сделать это...

Если взять интерактивную карту, состоящую из картинки и SVG поверх нее (как в этой статье), и убрать картинку, то останется интерактивная карта, состоящая только из SVG. Это вроде как очевидно. Вы можете дорисовывать или раскрашивать элементы в SVG на свой вкус, но принцип работы интерактивной части останется тем же.

Дело в том, что в браузере firefox не работает свойство stroke-dashoffset

Если добавить единицы измерения, то начинает работать:

stroke-dashoffset: calc(440px - (440px * 90) / 100);

Ну строго говоря для решения задачи "на CSS добавить внутри квадрата квадраты меньше и другим цветом" достаточно одного div-элемента (нет нужды добавлять новый элемент на каждый декоративный квадрат).



Но лучше все же уточнить у задавшего вопрос, что значит "не стереть локти" в его понимании.

На CSS такое обтекание никак не сделать. Но можно пойти одним весьма хитроподвывернутым способом - продублировать текст и скроллить два блока с контентом одновременно. Как в этом примере, только в одной плоскости, без "перевернутой" трансформации:



Это позволит сделать плавное движение, без рывков при перестроении элементов в DOM-дереве.

Вероятно вам нужно использовать "+":

nav:hover + section
  left: 170px

Давайте посмотрим с разных сторон:

С одной стороны SVG можно нарисовать в графическом редакторе - для замороченных фигур это будет проще, чем пытаться нашаманить их на CSS.

С другой стороны - для простых фигур быстрее может быть их сверстать, чем идти куда-то, открывать редактор, что-то там мышкой кликать, сохранять, копировать и.т.д. Ну а если быстрее - то выбор очевиден.

С третьей стороны может быть соглашение в компании относительно верстки и в нем этот момент может быть описан (скорее всего в пользу SVG). Тогда ничего не придумываем и действуем в соответствии с ним - постоянство в коде очень важно для его поддержки.

С четвертой стороны могут быть такие элементы, что на CSS их не получится сделать кроссбраузерно (с учетом утвержденного списка браузеров). Тогда SVG - наш выбор.

С пятой стороны могут быть анимации у этих элементов. Там нужно смотреть, но иногда вариант с SVG можно будет анимировать как задумано, а вариант на CSS - нет.

С шестой стороны есть вопрос производительности. Часто для имитации одного элемента в SVG нужен десяток-другой элементов, стилизованных с помощью CSS. А если таких элементов на странице сотни (и они превращаются в тысячи), то это начинает влиять на скорость применения стилей к странице.

Итого: иногда CSS - это быстрый и надежный вариант. Но у него есть ограничения, так что на практике SVG используется для этих задач чаще. И да, проверять кроссбраузерность стоит в любом случае.

Без кода сложно говорить, но третий глаз подсказывает, что скорее всего у родительского блока задано свойство transform, filter или will-change. Уберите его и все встанет на свои места.