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

Тема в разделе "Веб-дизайн", создана пользователем TavlaD, 29 июл 2011.

Модераторы: zek24
  1. TavlaD

    TavlaD Создатель

    Регистр.:
    26 дек 2009
    Сообщения:
    26
    Симпатии:
    1
    Подскажите, пожалуйста, какие есть варианты реализовать следующее:
    На сайт будут загружаться фотки определенных размеров без какой-либо обработки. Нужно сделать, чтобы на странице фотка отображалась только в синей области (см.рис)
    [​IMG]
    Была идея на изображение сверху бросить слой с png с прозрачностью внутри ромба, но проблема в том что задний фон на котором располагаются фотки не однородный и имеет рисунок и если кидать сверху такую маску с таким же фоном, то стыки заднего фона и маски будут видны. Какие еще есть варианты?
     
  2. lifediz

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    Можно сделать поворот картинки + бордер закруглить. Не уверен, но вроде с помощью канваса можно сделать такое.
     
  3. TavlaD

    TavlaD Создатель

    Регистр.:
    26 дек 2009
    Сообщения:
    26
    Симпатии:
    1
    Может не очень понятно описал что надо. Загружать должны просто фотку:
    [​IMG]

    А на сайте должно выходить уже что-то вроде такого:
    [​IMG]
     
  4. VertuOzz

    VertuOzz Создатель

    Регистр.:
    19 июл 2011
    Сообщения:
    12
    Симпатии:
    0
    Я бы попробовал сделать наложение водяного знака, в качестве которого использовался бы верхний слой
     
  5. TavlaD

    TavlaD Создатель

    Регистр.:
    26 дек 2009
    Сообщения:
    26
    Симпатии:
    1
    Каким образом? Или набивка постов? Я писал что:
     
  6. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Попробуй css свойство clip http://htmlbook.ru/css/clip
    Думаю с jqwery можно ромбиком сделать -)
     
  7. TavlaD

    TavlaD Создатель

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

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    А если сделать ещё 2 поворота, то можно добится нужного эффекта.

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

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    TavlaD
    делай наложение, а чтобы фоны не сливались однопиксельную белую рамку делай у ромба

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

    TavlaD Создатель

    Регистр.:
    26 дек 2009
    Сообщения:
    26
    Симпатии:
    1
    [​IMG]
    вот в белых многоугольниках и должны быть видны загружаемые фотографии. Тут уже наглядно видно, что задний фон не однородный. Под каждым многоугольником будет еще подпись и если подпись длинная и будет в 2 строчки, то нижний ряд съежает немного. Если первоначально подогнать фон маски, которую накладывать сверху картинок с задним фоном, то малейшие изменения по высоте и стыки будут видны