freislot
@freislot
Frontend-разработчик

Конструктор багетной рамы, какие варианты есть?

На входе имеем кусочек багета, примерно такой
490_interernyiy-baget-.-profil-157.jpg

И фотография, загруженная пользователем.
Необходимо обернуть багетом эту фотографию в рамку.

Какие способы решения здесь можно использовать? Как сделали бы вы?

Мне понравился css border-image но он не подходит так как там исходное изображение рамки уже склееное должно быть, мне же приходится работать с тем что есть, а есть только такие прямоугольные куски багетов.

Был предложен вариант использовать canvas и как-то там все это дело оборачивать в рамку, но не работал с канвасом, понятия не имею может ли он такое вообще.

В общем буду благодарен за любые ответы в этом направлении.
  • Вопрос задан
  • 489 просмотров
Пригласить эксперта
Ответы на вопрос 3
Ответ написан
Комментировать
xtala
@xtala
Постигает Дзен
а есть только такие прямоугольные куски багетов

Можно попробовать сделать из них бесшовные текстуры и уже дальше работать с ними. Чтобы сымитировать багет, вокруг фотографии нужно сделать 4ре блока div со свойство skew чтобы имитировать скос багета https://www.w3schools.com/css/tryit.asp?filename=t... , задать направление бекграунда X или Y оси, а так же масштабировать сам бекграунд, т.е рисунок багета, чтобы он не выглядел слишком крупным или мелким.
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
а есть только такие прямоугольные куски багетов

Я бы склеила их в фотошопе для нормального результата и использовала border-image. А не насиловала бы браузер трансформами и лишними блоками.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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