Igor Schnaider

Эксперт
  • Публикации

    679
  • Зарегистрирован

  • Посещение

  • Дней в лидерах

    63

Последний раз Igor Schnaider выиграл 5 мая

Публикации Igor Schnaider были самыми популярными!

Репутация

153 Хорошая

О Igor Schnaider

  • Звание
    Активный участник
  • День рождения 04.07.1993

Посетители профиля

1 411 просмотр профиля
  1. Ну да, я неправильно вопрос понял. @Switch74 предложил варианты для вашего случая, делайте так.
  2. Если в самом блоке 'a' текста нет, можно color вместо background задавать и наследовать его. jsfiddle.net/k65pq92o/ А еще лучше вынести в переменную. Тут кроссбраузерность немного страдает в случае с IE/Edge, но зато код будет более понятным. Да и через postcss-css-variables можно прогнать всегда :-)
  3. Ну я оставил там в примере комментарий: как вариант, вращать элемент <image> в самом SVG, а маску применить к обертке. Вообще, с этим clip-path постоянно какие-то странности :-) Каждый раз для себя что-то новое открываю.
  4. В общем, методом тыка пришел к тому, что нужно дублировать свойство в атрибуте style. ¯\_(ツ)_/¯ https://codepen.io/anon/pen/RgJyrB Новый Firefox уже поддерживает clip-path: polygon, для старых нужен fallback на SVG. IE и Edge вообще никак.
  5. Попробуйте с objectBoundingBox: <svg> <defs> <clipPath id="WavesPolygon" clipPathUnits="objectBoundingBox"> <polygon points="0 0, .95 0, .95 .08, .8 .05, .6 .1, .4 .15, .2 .2"></polygon> </clipPath> </defs> </svg>
  6. Еще вариант: .get_in_touch{ background: linear-gradient(rgba(250, 0, 0, .75), rgba(250, 0, 0, .75)), url(../img/your_project_img.png) no-repeat top /cover; } p.s. C ховером, конечно, отдельным слоем делать.
  7. Там вместо display:none надо было обнулить width и height.
  8. В первом случае, думаю, дело в transform в CSS. С атрибутом transform, вроде, работает. (Но что мешает сразу поставить букву на нужное место просто через координаты?) По поводу clip-path: FF сейчас обновился, работает. Но раньше нужно было использовать SVG для описания clip-path. https://codepen.io/anon/pen/awmzev IE и Edge не поддерживают.
  9. Самое простое — подсвечивать SVG элементы, если у вас карта на SVG. Тогда не надо будет ничего позиционировать. Если у вас обычная картинка, то либо высчитывать отступы, задавать их в относительных размерах. Но тогда если карта еще и масштабируется, то это тоже прийдется учитывать. Либо немного упростить и делать слой с подсветкой на весь размер карты. Про то, чтобы загорались регионы, принцип такой.
  10. https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
  11. 1, 2, 3.
  12. Лучше сам текст использовать в качестве маски для шестиугольника. Типа такого. И я бы преобразовал его в пути, чтобы он не поехал с центра, если будет использоваться fallback шрифт.
  13. https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp http://shop.oreilly.com/product/9780596528126.do — если хотите подробно изучить.
  14. Работает же ))
  15. top: 0; left: 0; right: 0; bottom: 0; добавьте