@TemperOK
Чем больше учишь, тем меньше знаешь.

Как правильнее сверстать данные части макета? img или background?

Добрый день.

Подскажите как правильнее сверстать следующие вещи:

Вариант 1
95c118694cb14dea9ddf772c61a178f1.png

Кружка с канцтоварами, кружка с кофе и наушники на макете идут как отдельные изображения. Я думаю, что лучше скрыть текст и вырезать фон с этими изображениями как общее фоновое изображение, чтобы с сервера при открытие страницы загружалось одно изображение, а не 3. Плюс ко всему размер изображения будет меньше, чем суммарный этих 3. да и с адаптивностью проблем меньше.
Вариант 2
acc11aea498b4669b6f6847f7da7cf2d.png

Розовой блок выполнен на макете в виде перевернутого квадрата из которого видна только часть одной стороны. Ввиду этого вижу несколько вариантов.:
1 - сделать как на макете (т.е. вырезать квадрат как картинку и точно так же вставить его в макет)
2 - нарисовать в SVG многоугольник
3 - точно так же как и предложил в предыдущем варианте. Вырезать всё изображение без текста и вставить как фон.
Точно такой же вопрос касательно компьютера на втором варианте. Стоит ли его вставлять как изображение? По сути своей он смысловой нагрузки не несет. Отличие изображения от фона я так понимаю в том, что на изображение можно жмакнуть ПКМ и сохранить его, либо открыть в отдельной вкладке. Но не думаю, что потенциальный пользователь стал бы это делать конкретно с данной картинкой (хоть макет и учебный, и реально использован не будет).
В данном случае я придерживаюсь 3 варианта (хотя насчет варианта с SVG не уверен).

Привел свои логические умозаключения, но так как опыта мало, прошу совета у опытных верстальщиков.
  • Вопрос задан
  • 199 просмотров
Решения вопроса 1
1. Я бы сделал одним изображением, просто потому что так проще.
2. Считается, что изображения, которые не являются частью контента, т.е. все служебные вроде иконок, фона и т.д. лучше показывать не напрямую тегом img, а в качестве background-image либо различными другими техниками. Мне например очень нравится решение с линейным градиентом, любые фоновые "полоски" верстаю именно так. htmlbook.ru/css3-na-primerakh/lineinyi-gradient
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iamd503
@iamd503 Куратор тега CSS
Верстальщик
1. вырезать картики с фоном и сохрать в шпег.
2. а квадрат div`ом уже не верстается?
2.1. комп сделать как background к тексту справа
Ответ написан
Комментировать
LenovoId
@LenovoId
svg, css,js
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы