nvdfxx

свг поверх картинки, так это делается

можно поверх первой картинки наложить вторую с нулевой прозрачностью и clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) и через жс при наведении на svg преобразовывать path в clip-path, присваивать его картинке номер 2 и делать ей опасити 1

потому что вот это неправильная конструкция

<div>
          <input id="tab_nw1" type="radio" name="tabs_nw" checked>
          <label for="tab_nw1" title="Wordpress">Таб 1</label>
          <input id="tab_nw2" type="radio" name="tabs_nw">
          <label for="tab_nw2" title="Windows">Таб 2</label>
          <input id="tab_nw3" type="radio" name="tabs_nw">
          <label for="tab_nw3" title="HTML5">Таб 3</label>
          <input id="tab_nw4" type="radio" name="tabs_nw">
          <label for="tab_nw4" title="CSS3">Таб 4</label>
</div>

вы не сможете при инпут:чекед обратиться к элементам на уровне выше, удалите див, оборачивающий эти инпуты

Canvas для такого не проще юзать? Любую сцену можно будет отрисовать, просто скормив массив мест в функцию рендера. Плюс проблем с увеличением не будет, на кансвасе это легко делается

<h1><span>Эффект</span></h1>

h1 {
    overflow: hidden;
}

span {
    position: relative;
    transform: translateY(100%);
    transition: .3s;
    display: inline-block;
}

h1:hover span {
    transform: translateY(0);
}

youtube api

Можно такой хак заюзать, только придется еще следить за переполнением

Чем scale не угодил?

#text-6 {
    margin: 0 auto 10px;
}

auto-fill

Зачем инпут оборачивать в лейбл, который, вроде как, должен служить подписью к этому самому инпуту? Получается, что (условно) главный компонент зависит от дочернего, поменяйте версточку, и проблема легко решится

методом научного перебора для grid-gap: 15px и padding: 15px для body получилось

grid-template-columns: repeat(4, calc(25vw - 19px));
grid-auto-rows: calc(25vw - 19px);

что не выглядит красивым решением

justify-content: space-between

mousedown -> запомнили координаты мыши -> mouseup -> запомнили координаты мыши -> если вам прям вот 10px надо, чтоб точно 10 было, то находим гипотенузу этого прямоугольного треугольника, после чего делаем вывод - разрешать переход или нет

Sass'у вроде как json можно скормить. Т.е. делаете какой-нибудь themes.json

{
    'default': {
        'textColor': '#000',
        'bgColor': '#f5f5f5'
    },
    'dark': {
        'textColor': '#f5f5f5',
        'bgColor': '#212121'
    } // и т.д.
}

В app.vue его импортите в data, создаете там же переменную, которая хранит выбранную тему, в computed выполняете поиск по themes.json, выцепляете нужную тему и подсовываете ее sass'у. И не нужно никаких классов тогда добавлять

абсолютно-позиционированный span вместо псевдоэлемента, и ему скриптом высоту и ширину задавать