Rustam Bainazarov

По этой ссылке есть мой ответ:
Как прижать подвал к низу страницы и при этом оставить событие scroll работоспособным?

P. S. При удалении контента — он удаляется из DOM, поэтому не может занимать место. Либо у вас контент не удаляется, либо вы использовали какие-то странные JS-решения для прижатия подвала.

Через CSS это сделать невозможно при однородной структуре, только безумным хаком (column-reverse + селектор тильда + обратный порядок элементов). И другие способы, привязанные к последовательности блоков — это так себе.

Ни :nth-child, ни :first-of-type так не работают (читайте хороший пост на тему).

Поэтому простейший JS вам в помощь:



Update: посмотрите комментарии, там решение на строчку кода меньше.

Если img превышает высоту родительского блока, то блок увеличивается.

Можно так, к примеру:

.swiper-slide {
    height: unset;
}

.flex {
    height: 100%;
}

Flex (для лучшей и более простой поддержки браузеров) + box-shadow (чтобы не увеличивать габариты блоков; можно заменить на псевдоэлемент):

https://codepen.io/xgad/pen/3dca3c1c396966acc4f8db...

https://codepen.io/sergiopedercini/pen/jmKdbj

https://codepen.io/saadeghi/pen/IBhfJ

У тебя стоит transition: .4s на все теги a (глобальный стиль). Убери для этого селектора transition:

.highslide-controls a {

    transition: none; /* Вот это добавь */

    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif");
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    outline: none;
}

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

На skewX это делать геморрой один (только на глаз) + нужно иметь четкие размера контента блока посередине, иначе ширина скоса будет меняться каждый раз, — словом, жопа.

Поэтому так: clip-path на calc() + отрицательный margin по ширине скоса.

Обратите внимание на второй блок. Если контент будет больше и высота блока выше, чем минимальное, заранее заданное значение, есть небольшая проблема с углом наклона текста -- это не исправить на автоматическом уровне с помощью CSS, т. к. блок с текстом мы поворачиваем с помощью градусов, а скос родительского блока делаем с помощью плавающей координаты опорной точки.

EDGE и IE11 в полёте с динамическим clip-path — можно просто сделать изначально безо всяких наклонов, а для поддерживаемых браузеров с помощью media-запрос supports сделать следующее:

Да учите же вы наконец все Flexbox и Grid :))

Судя по всему, вы смотрите в Chrome. Это графический баг рендеринга. Возможно, связанный с окружающей разметкой и iframe-выводом от JSfiddle. Попробуйте разместить где то ещё.

Замена содержимого CSS недоступна. Если без JS и чтобы было плавно — у вас только один вариант: разместить несколько, к примеру, span'ов с разным текстом и абсолютным позиционированием внутри родительского контейнера. И анимировать их поочередно, создавать иллюзию смены текста (геморрой): https://jsfiddle.net/yofud4h0/2/

Если о замене текста, то как бы можно через CSS -- заменой значения свойства content у псевдоэлементов:
https://jsfiddle.net/yezrts0b/

Текст под иллюстрацией женского портрета я тут анимировал заменой значения свойства content, но плавно это сделать нельзя, если только хаками с привязкой к шагам анимаций цвета текста, прозрачности и т. п. (геморрой).

Неверное использование свойства animation-name, оно не комбинированное, а вы пытаетесь туда поместить ещё и значение свойства animation-duration.

Вот так можно:


P. S. Кстати, что за position: center?
Такого значения у этого свойства нет.

Как и говорил, проблема в SVG:


Нужно было добавить в тег svg:

width="750.3" height="450" preserveAspectRatio="none slice"

Полный код SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 750.3 450" style="enable-background:new 0 0 750.3 450;" xml:space="preserve" width="750.3" height="450" preserveAspectRatio="none slice">
<style type="text/css">
  .st0{fill:url(#SVGID_1_);}
</style>
<g id="bg">
  <g>
    <g>
      
        <radialGradient id="SVGID_1_" cx="177.9216" cy="209.9861" r="519.3318" gradientTransform="matrix(1.2506 0 0 -1 -71.7218 452)" gradientUnits="userSpaceOnUse">
        <stop  offset="1.075270e-02" style="stop-color:#2C35A2"/>
        <stop  offset="0.1635" style="stop-color:#252C88"/>
        <stop  offset="0.3975" style="stop-color:#1B2167"/>
        <stop  offset="0.621" style="stop-color:#15194F"/>
        <stop  offset="0.8273" style="stop-color:#101540"/>
        <stop  offset="1" style="stop-color:#0F133B"/>
      </radialGradient>
      <rect y="0.3" class="st0" width="750.3" height="450"/>
    </g>
  </g>
</g>
</svg>

Либо же cделать градиент на CSS, тем более такой простой.

SVG и только SVG.

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

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

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

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

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

Можно делать в Inkscape, там тоже есть режим просмотр кода разметки.