Как залить фон родительского элемента из центра кнопки анимированно?

Типа того https://jsfiddle.net/ayqce6md/

Как залить фон родительского элемента из центра кнопки анимированно?

Делаете круглый псевдоэлемент такого размера, чтобы занимал всю площадь блока. Иногда это получается сделать через calc и padding, иногда нет и тогда на JS задаете высоту и ширину через кастомные свойства.
Позиционируете псевдо в центр и сжимаете в 0.

При клике на кнопку меняете класс у блока с псевдо.

Как изменить положение полей?

interneterrorhehe, если у родителя уже флекс, то зачем полям margin, когда есть gap (row-gap, column-gap) и не нужны древние браузеры.

Как сделать такую штуку в HTML?

Заголовок. Флексом (или гридом).
У него 2 псевдоэлемента.
Всё.

Если в заголовке возможны br или span, то текст сразу обернуть в span.

Как сделать анимацию поочередного появления?

Проще одну анимацию с разными задержками делать

Как сделать анимацию поочередного появления?

Ну вот точно также Как сделать анимацию текста?

Как сверстать адаптивно блоки плиточкой?

Вижу что там на flex боксах верстка, какие есть еще варианты ?

- флесы (лишние обертки)
- гриды (идеально подходят)
- абсолюты (безумие)

можно ли такое на бустрапе сделать?

Можно

Как выравнить текст в блоке?

Приложите картинку, какого результата вы хотите достичь?

Скажите, как сделать так, чтобы текст в блоке с классом .textTwo начинался не с центра, а был выровнен по левому краю?

Потому что текст в блоке с классом .textTwo и так выровнен по его левому краю.

Как по клику на элемент поменять курсор?

pchela95, да, конечно, в описании свойства это напрямую написано.

Как сделать анимацию текста?

Вячеслав Боргомотов,

вы их прибили абсолютом в одно место.

Хотя, может вам так и надо, чтобы они в одной точке вертелись.

Вам нужно открыть файл с анимациями, найти нужную, вставить в свои стили.
Изменить эту анимацию. Не 0% и 100%, а так, чтобы после того, как закончилась видимая часть анимации ещё некоторое время ничего не происходило. Сколько там у вас спанов? 5? Значит, до 20% видимая часть, дальше типа пауза, ничего не происходит и прозрачность на 0. Если 20 будет некрасиво - подправите.

Изменить длительность анимации в соответствии с новыми знаниями.

Задержку анимации удобнее задавать через кастомные свойства, чтобы не было мучительно больно пересчитывать и переписывать 100 раз, если вам захочется всюду изменить шаг с 2,5 на что-то другое.

:root {
  --delay: 2.5s;
}

.slidingVertical span:nth-child(2) {
  animation-delay: var(--delay);
}

.slidingVertical span:nth-child(3) {
  animation-delay: calc(2*var(--delay));
}

.slidingVertical span:nth-child(4) {
  animation-delay: calc(3*var(--delay));
}

.slidingVertical span:nth-child(5) {
  animation-delay: calc(4*var(--delay));
}

Как сделать анимацию текста?

Вячеслав Боргомотов, вы их прибили абсолютом в одно место.

Откройте файл с анимациями, возьмите оттуда только нужную вам (зачем таскать с собой все остальные?).
Расположите спаны как вам нужно.

p.s. свойство без префиксов должно быть указано последним, а не наоборот, как у вас.

Как сделать анимацию текста?

И что именно у вас не получилось?
Код на jsfiddle.net

Как по клику на элемент поменять курсор?

Только это псевдокласс

Как по клику на элемент поменять курсор?

:active

Как сделать появление видео на сайте при вводе ссылки на видео в input?

Не нужно дублировать вопрос Как сделать появление видео на сайте при вводе ссы...

Как сделать подменю в столбик?

Как отменить это свойство для подменю?

Не нужно отменять.
Применяйте к нужным элементам.

Либо используйте максимально краткие из возможных дочерние и контекстные селекторы, в данном случае это .first_menu > li.
Либо задайте для этих li классы и обращайтесь по ним.

Вот так header ul li делать не стоит, ведь у вас есть класс у ul. Совершенно незачем во-первых, увеличивать вложенность селекторов и, во-вторых, обращаться по тегам.

А ещё лучше:

Я вывожу меню в строчку, но свойство inline применилось и для подменю.

Сейчас в ходу флексы и гриды.
Изучите и вам понравится.
Заодно и проблема с переопределением li в данном случае уйдет.

Как выровнять текст?

Вы сказали встать по центру, блок туда и встал.
Думаю, что так будет понятнее, что происходит
https://jsfiddle.net/w79rcf8y/

p.s.
1. У вас дублируются id. Так нельзя.
2. Старайтесь не использовать id для стилизации по крайней мере для своего кода.
3. При вашей верстке для .block флекс вообще не нужен.
4. Ещё, это, наверное, форма, а не дивянка.
5. Ну и <strong> лишний.

Как настроить масштабируемость для контента?

Alex_mos, вы можете указать фикс ширину в meta viewport и отступы для блока. Но вообще это не очень качественный вариант. Может оказаться, что шрифт (или какие-то блоки) на мобилках уже не видно либо браузер поступит с ним по своему усмотрению, а не так, как вам хочется.

Разумнее всё таки делать адаптивную верстку. Так, чтобы на любом устройстве при любой ширине вьюпорта сайт смотрелся хорошо и удобно читался.

Контейнеру обычно ограничивают ширину или задают фикс ширины на разных вьюпортах.

Попробовал но если у внутреннего блока будет задана своя ширина

Вы можете использовать % или единицы fr для гридов или другие адаптивные единицы. А также пользоваться богатыми возможностями флексов и гридов для адаптива.

При прокрутке сайта, в верхнее закрепленное меню как добавить новый пункт?

Изначально скрыть.
На JS следить за прокруткой.
При достижении нужного значения, добавлять класс всему меню или только нужному пункту.
В классе прописать нужные для показа свойства.

Как убрать отсуп у заголовка с большим размером шрифта в html с помощью CSS?

Я бы только не в px задавала сдвиг, а в единицах зависящих от размера шрифта, em, ex, ch