Как можно такое сделать?

Question

[Владимир]

Дали тестовое пару недель назад, сроки все прошли, я не справился, а желание понять как такое сделать, осталось. Помогите советом, как это сделать, желательно на CSS, но можно и на JS).... да хоть как нибудь...

Сверстать блок предоставленный на видео example.mp4 максимально похоже.
Требования к заданию:
1. Вёрстка должна быть резиновой и адаптивной при любом разрешении, как на видео.
2. Видео должно проигрываться как единое целое, а не случайными кусочками.
4. Не допускается использование библиотек, html/css-фреймоворков или сеток по типу bootstrap и др.

Ссылка на видео: тык
Ссылка на то как должно быть: тык

Comments

[ThunderCat]

Не допускается использование библиотек, html/css-фреймоворков или сеток по типу bootstrap и др.

А с ними пробовали?

[Ankhena]

Вы же третий раз приносите сюда этот вопрос. И в одном их них было решение.
Не нужно каждый раз делать новый аккаунт.

[Ankhena]

Обычный flex.
flex-wrap для переноса строк, когда не влезают.
flex-grow для растяжения пустых спанов.
Спан с текстом покрасить в черный.

Видео прибить вниз гридом или абсолютом.

Что там может не получаться с сеткой?

[Владимир]

ThunderCat, Нет, не пробовал)

[Владимир]

Ankhena, Я вообще, по-моему первый раз задаю какой либо вопрос здесь) и у меня точно один аккаунт.

[Владимир]

Ankhena, А можно ссылку на решение, если оно отличается от тех которые здесь есть.

[Ankhena]

Владимир, ну предположим, вас двое и все получили одинаковые задания и оба не могут сделать )) Первые два признались в том, что он один ))

[Владимир]

Ankhena, Спасибо, попробую, а зачем видео к низу прибивать, или вы имеете ввиду под текст... тогда я не очень понял как это сделать гридом?

[Ankhena]

Владимир,

А можно ссылку на решение, если оно отличается от тех которые здесь есть.

Эммм... Решения ниже в блоке ответов.

[Ankhena]

Владимир,

а зачем видео к низу прибивать, или вы имеете ввиду под текст...

да, под текст

тогда я не очень понял как это сделать гридом?

Может, откроете мой код в песочнице, да посмотрите? Там же всё так и сделано.

[Владимир]

Ankhena, Да, уже смотрю, очень интересно, спасибо)

[Ankhena]

Владимир, какой шрифт в макете?

[Владимир]

Ankhena, Есть только фото и написано чтобы просто было похоже.... поэтому шрифта не знаю.

Answer 1

[Ankhena]

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

https://codepen.io/AnnaSummer/pen/yyBrwyz

Альтернативный вариант с использованием mix-blend-mode, но нужно подбирать цвета и эффекты

https://codepen.io/AnnaSummer/pen/LEPoRLZ

Comments

[Владимир]

Блин, очень прикольное решение и главное результат полностью соответствует))), буду разбираться, потом отпишусь. Еще раз спасибо!

[shsv382]

Владимир, почитай про css-mask (недавно как раз на хабре была статья в блоге Т-банка)

[Ankhena]

shsv382, реализацию покажете?

[Ankhena]

Владимир, пора отмечать оба ответа решением.

[Владимир]

Ankhena, Согласен! Спасибо)

[Ankhena]

Владимир, и ответ Максима тоже является решением :)

[Максим]

Ankhena, это не решение всё равно..
Я зотел что бы он хоть что то сделал руками..там всего то надо удалить высоту и ширину и постааить вьюбокс

[Ankhena]

Максим, это достаточный ответ для того, чтобы самостоятельно довести его до нужного результата

[Владимир]

Ankhena, Максим, Да все норм, я просто не успел еще второе решение рассмотреть) Решением отметил, разбираться буду позже, когда разберу все три варианта от Ankhena)) Спасибо всем большое!

Answer 2

[Максим]

Comments

[Владимир]

Вам тоже большое спасибо, ваше решение тоже изучу, хороший опыт)