Как сверстать такой лендинг по другому?

Question

[vahromeevilya-widestudio]

Есть сайт https://dev.frontend.widestudio.pro/ilya/firefox-b... - вся верстка сделана с помощью свойства border-image.
Но данное решение лагает в Firefox.

Есть ли альтернативное решение, как это сверстать? Использование SVG обязательно. То есть переделывать все картинки на растр возможности нет.

Какие можно еще способы вместо border-image использовать?

Comments

[Максим]

и в edge тоже не фонтан

[vahromeevilya-widestudio]

Максим с Казахстана, Да и в сафари на самом деле тоже. Хотелось бы добиться такого же результата но без лагов

[RAX7]

он не из-за border-image лагает, а из-за сочетания animation и filter, а также количества элементов к которые это применено.
Попробуй убрать из одно или оба этих правила из css:

._active-animation .benefit-card::before, ._active-animation .block::before, ._active-animation .bottom-block-line::before, ._active-animation .build__card-title span::before, ._active-animation .build__card-title::before, ._active-animation .build__card::before, ._active-animation .build__headline::before, ._active-animation .coach::before, ._active-animation .coach__line::before, ._active-animation .icon-menu span, ._active-animation .icon-menu::after, ._active-animation .icon-menu::before, ._active-animation .line-shine, ._active-animation .menu__list li::after, ._active-animation .request__form::before, ._active-animation .request__headline::before, ._active-animation .scheme__card::before, ._active-animation .services__block::before, ._active-animation .services__headline-big::before, ._active-animation .skills__block-4::before, ._active-animation .skills__block::before, ._active-animation .skills__headline::before, ._active-animation .video__headline::before, ._active-animation .video__youtube::before, ._active-animation div.services__headline-small::before, .build__card-title ._active-animation span::before, .icon-menu ._active-animation span, .menu__list ._active-animation li::after {
  -webkit-animation: opacity 4s infinite linear;
  animation: opacity 4s infinite linear;
}

.benefit-card::before, .block::before, .bottom-block-line::before, .build__card-title span::before, .build__card-title::before, .build__card::before, .build__headline::before, .coach::before, .coach__line::before, .icon-menu span, .icon-menu::after, .icon-menu::before, .line-shine, .menu__list li::after, .request__form::before, .request__headline::before, .scheme__card::before, .services__block::before, .services__headline-big::before, .skills__block-4::before, .skills__block::before, .skills__headline::before, .video__headline::before, .video__youtube::before, div.services__headline-small::before {
  -moz-filter: drop-shadow(0 0 4px #00c3ff);
  -ms-filter: drop-shadow(0 0 4px #00c3ff);
  -webkit-filter: drop-shadow(0 0 4px #00c3ff);
  filter: drop-shadow(0 0 4px #00c3ff);
}

[Антон Литвиненко]

Filter drop-shadow в проектах стараемся не юзать ибо тормозят систкму

[vahromeevilya-widestudio]

RAX7, Дааа, действительно помогло. Скорее всего отключим анимацию и filter , плюс лишние картинки уберем, раз мигать будет нечему.

[cssfish]

Антон Литвиненко, это точно. у меня ff на таких сайтах стабильно "щелкает" и потом отрубает поддержку видеокарты )

Answer 1

[Undefined Null]

1) оборачиваете в div, там вешаете background-image, позиционируете.
2) ну раз SVG, то в него и загонять

Comments

[vahromeevilya-widestudio]

Проблема background-image в том, что это не адаптивно. То есть если хоть на капельку поменяется текст, то все может поехать, поэтому и пришлось использовать border-image

[Undefined Null]

vahromeevilya-widestudio, адаптивность с помощью доп. CSS свойств, media-queries и включения тега svg тогда уж

[vahromeevilya-widestudio]

Undefined Null, Я тоже думал про меди запросы и так далее, но основная проблема в том, что если блок будет растягивать, то svg будь то бэкграунд или просто тэг, будет вести себя не так как хочется. Например если будет очень много текста в блоке то свг растянется сверху вниз, а мне например нужно, чтобы растягивалась только определенная часть как в текущей реализации. И тут к сожалению меди запросы не помогут( . Мне чуть выше в комментариях подсказали как оставить все что есть, при этом улучшив производительность