Отображение картинок

[TavlaD]

Подскажите, пожалуйста, какие есть варианты реализовать следующее:
На сайт будут загружаться фотки определенных размеров без какой-либо обработки. Нужно сделать, чтобы на странице фотка отображалась только в синей области (см.рис)

Была идея на изображение сверху бросить слой с png с прозрачностью внутри ромба, но проблема в том что задний фон на котором располагаются фотки не однородный и имеет рисунок и если кидать сверху такую маску с таким же фоном, то стыки заднего фона и маски будут видны. Какие еще есть варианты?

 

[lifediz]

Можно сделать поворот картинки + бордер закруглить. Не уверен, но вроде с помощью канваса можно сделать такое.

 

[TavlaD]

Может не очень понятно описал что надо. Загружать должны просто фотку:

А на сайте должно выходить уже что-то вроде такого:

 

[VertuOzz]

Я бы попробовал сделать наложение водяного знака, в качестве которого использовался бы верхний слой

 

[TavlaD]

Я бы попробовал сделать наложение водяного знака, в качестве которого использовался бы верхний слой

Каким образом? Или набивка постов? Я писал что:

Была идея на изображение сверху бросить слой с png с прозрачностью внутри ромба, но проблема в том что задний фон на котором располагаются фотки не однородный и имеет рисунок и если кидать сверху такую маску с таким же фоном, то стыки заднего фона и маски будут видны.

 

[UDAV]

Попробуй css свойство clip Для просмотра ссылки Войди или Зарегистрируйся
Думаю с jqwery можно ромбиком сделать -)

 

[TavlaD]

Попробуй css свойство clip Для просмотра ссылки Войди или Зарегистрируйся
Думаю с jqwery можно ромбиком сделать -)

clip смотрел, но это я чтобы показать тут что необходимо сделал ромб, но форма не обязательно ромб (многоугольник, круг). А с помощью clip можно только 4-хграник сделать на больше он не способен.

 

[lifediz]

А если сделать ещё 2 поворота, то можно добится нужного эффекта.

Matrix Filter (Internet Explorer)
-webkit-transform (Safari | Chrome)
-moz-transform (Firefox)
-o-transform (Opera)

ну и потом сделать border-radius

 

[mdss]

TavlaD
делай наложение, а чтобы фоны не сливались однопиксельную белую рамку делай у ромба

А если сделать ещё 2 поворота, то можно добится нужного эффекта.
ну и потом сделать border-radius

рендеринг хромает еще, рано использовать этой свойство

 

[TavlaD]

TavlaD
делай наложение, а чтобы фоны не сливались однопиксельную белую рамку делай у ромба

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