Ivan Bogachev

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

Подобные штуки строятся на анимации transform: scale(...), ну а вариантов с разной длительностью и количеством кругов можно придумать много, тут уж на вкус и цвет...

Это один из багов отображения SVG-картинок во flex-контейнерах. Это вообще больная тема, там эти картинки то схлопываются по ширине, то получают странные отступы в отдельных браузерах. Можно решить, обернув картинку в div с явным указанием display=block для него:

<div class="test">
    <img src="https://123.svg"/>
</div>

.test {
    display: block;
}

В черновиках Selectors Level 4 есть мысль о псевдоклассе :has, который мог бы дать возможность проверять такие связи и писать что-то вроде

.tab-position:has(> .pinned) {
    /* . . . */
}

но на сегодняшний день ни один браузер это не поддерживает. Так что нет, такой селектор в CSS сделать пока нельзя.

если увеличить размер шрифта, то и отступы увеличатся

Так это же замечательно, так и должно быть. И вопрос не только в доступности. Задание всех размеров в rem/em позволяет при изменении размера шрифта сохранить приятный глазу дизайн, у которого не "перекашивается" соотношение веса элементов и негативного пространства. Максимальный эффект достигается при использовании CSS-шлюзов и адаптивной типографики, что дает возможность без лишних движений сделать "красиво" на любых размерах экрана. А если заранее определить с дизайнером все стандартные размеры для всего (я часто использую .3, .5, .8, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5 rem), то можно будет быстро верстать "на глаз", по бумажным наброскам, и даже без дизайнера совсем, используя не гору магических чисел, а известный набор удобных размеров. Конечно, это ломает мозги неподготовленному дизайнеру, но многие модные ресурсы (тот же Smashing Magazine) используют подобный подход весьма успешно.

с помощью css

Можно загуглить обсуждения того, почему эту технологию в 2014 решили убрать из WebKit. Речь там в основном идет о том, что у CSS Custom Filters были проблемы с безопасностью -> ввели ограничения на их использование -> оказалось, что область применения при таком раскладе очень узкая и по факту они не особо то и нужны -> разработчики хрома остановили разработку на пол года, а в других браузерах по сути и не начинали реализовывать все это. Плюс высказывалась мысль, что лучше сделать набор готовых фильтров. Вот и заглохла идея. На сегодняшний день мы можем использовать WebGL в чистом виде, вне CSS, чтобы решать некоторые из задач, для которых вся эта тема затевалась. Эффекты для картинок можно делать руками, а также есть инструменты вроде HTML-GL, позволяющие накладывать эффекты "как бы на страницу" (там страница с некоторыми ограничениями рендерится в контексте WebGL, ну а дальше все так же, как и с картинками).

Как вариант:

ul.sub-menu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 35px;
    top: -35px;
    left: 0;
}

first-child -> Ничего не происходит.
nth-child(2) -> работает, но первый элемент считает как второй

Ну давайте посчитаем:

<div class="row">
    <div class="col-6">...</div> <!-- Первый -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Второй. Определенно второй. -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Третий -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Четвертый -->
</div>

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

Обычно задача ставится в обратную сторону - определяется список браузеров и потом код проверяется на наличие в нем неподдерживаемых в этих браузерах свойств. С этим отлично справляется doiuse.

Они используют CSS-градиенты и свойство backgrond-clip:

А перемещают эти градиенты нехитрой анимацией:

Также это можно делать на SVG-масках. Будет более кроссбраузерно.
Ну и на канвасе можно, по тому же принципу, что и с масками.

Может быть какой-нибудь piechart на максималках?)

Это не труъ. Настоящие верстальщики делают такие штуки на чистом CSS. А если лениво или времени нет - вставляют в страницу большой картинкой. На самом деле в верстке может быть смысл, если нужна адаптивность - не всегда, но часто ее может быть проще сверстать, чем на лету подгружать разные картинки в зависимости от изменяющегося размера экрана.

Набросал вам примерчик, думаю раскрасить его градиентами вы уже сами сможете:

Юрий Артюх уже рассказывал как подобные штуки делать, так что пересказывать не буду - просто посмотрите. Подход там универсальный - можно и на канвасе и на SVG все делать (хотя канвас по идее более производительным будет).

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

На CSS только плоская карта получится. Надпись можно было бы соорудить с помощью большого количества элементов и 3d-трансформаций, но результат будет очень грубым. Так что WebGL в таких задачах - наше все.

Запустить крутиться планету

Все не так уж и сложно - одна сфера, одна текстура. Пример можно посмотреть в статье про трехмерные презентации на Three.js, там все то же самое, только в вашем случае сфера маленькая. Ну а поворачивать землю немного каждый кадр - это даже не задача.

запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

Юрий Артюх в одном из стримов делал как раз такую вращающуюся надпись. Очень прикольно получилось, стоит посмотреть.

P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.

Смущает класс ".list__link"

Если вас смущает повторение list в названии класса, то можно воспользоваться сохранением имени в стиле that=this из javascript:

.list {
    $b: &;

    &__item {
        &:first-child {
            #{$b}__link {
                // . . .
            }
        }
    }
}

Но это сложно назвать более читаемым вариантом.

Если цель - все же сделать код более удобоваримым, то может иметь смысл просто ограничить вложенность при написании стилей (именно визуальную вложенность кода, а не каскад), как это делают в том же rscss:

.list {
    &__item {
        // . . .
    }

    &__link {
        // . . .
    }

    &__item:first-child &__link {
        // . . .
    }
}

А почему бы не использовать обычную feDropShadow?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="2" flood-color="grey" />
    </filter>
  </defs>
  <polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5"
           filter="url(#shadow)" fill="hsl(156,80%,50%)"></polygon>
</svg>

Блоки с классами man, woman и kid должны быть рядом с инпутами, в той же обертке. Вот так:

div
    input
    label
    input
    label
    .man
    .woman
    .kid

а не вот так:

div
    input
    label
    input
    label
.man
.woman
.kid

Попробуйте использовать одинаковые наборы функций, но с разными значениями:

.filters {
    filter: grayscale(0.85) sepia(0%) brightness(1);
}

.links-item:hover .filters {
    filter: grayscale(0) sepia(40%) brightness(0.55);
}