Как лучше сверстать этот блок, спрайтами или с псевдоэлементом :before?

Question

[safbek]

Здравствуйте! Как лучше всего отверстать эту секцию? Я пробовал задать пустой див с border. и к подгонять картинки с div:before(background-image). Но при чуть меньшем размере все сломалось, разбежалось. И не получается накладывать фоны. Может лучше вырезать в фотошопе и сделать спрайтом? В каких случаях лучше использовать спрайты, а в каких обходиться свойствами css. И не могли бы подсказать ресурсы про создание спрайтов и наложение фона поверх другого? ничего толкового не нашел сам, возможно, плохо искал...

Answer 1

[Ankhena]

не могли бы подсказать ресурсы про создание спрайтов

Любой сервис по запросу "генератор спрайтов онлайн". (Мне так больше нравится результат от сделанного вручную спрайта, если картинки разного размера)
Либо svg спрайты
https://habrahabr.ru/post/141654/
glivera-team.github.io/svg/2015/12/08/svg-sprites.html
Спрайт svg — как правильно варить?

наложение фона поверх другого

В смысле ресурсы? Либо рисуете в фотошопе или другой рисовалке и сливаете слои. Либо делаете это в CSS, обычная геометрия.

Как лучше всего отверстать эту секцию? Я пробовал задать пустой див с border. и к подгонять картинки с div:before(background-image).

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

Comments

[safbek]

Спасибо за развернутый ответ!Да, действительно, это было совсем уж не оправдано и глупо. Насчет фона, если ненакладно, можете посмотреть мой вопрос насчет фона...
ru.stackoverflow.com/questions/605687
а то не знаю как короче объяснить...

[Ankhena]

safbek: что-то я не поняла... это про розовые вертикальные полоски?

[safbek]

Ankhena W: ну да вообще-то) мне говорили что это спец колонки для удобства разметки. НО я подумал, колонки то разделили для удобства, но так же это рабочий сплошной фон. То есть два в одном, так как когда убрал этот фон, сайт уж совсем стремный получился. Во многих секция сплошной белый фон, а разметка по сетке бутстрап. Зря?

[Ankhena]

safbek: это вспомогательные полоски сетки, их не верстают

[safbek]

Ankhena W: Вот я лоханулся)столько нервов потратил на это фон, хоть и предупреждали меня, но почему-то я расценил это как сплошной фон! Ну что, спасибо еще раз!