Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обрезание блоков по общему контуру (https://javascript.ru/forum/events/16452-obrezanie-blokov-po-obshhemu-konturu.html)

doniv 08.04.2011 16:05

Обрезание блоков по общему контуру
 
Здравствуйте, появилась проблема, что понятнее ее объяснить я накатал иллюстрацию:



Мне нужно, чтобы все блоки, которые выходят за скругление блока X1 были полностью обрезаны.

Проблема в том, что, например, хром обрезает блоки с background-image и relative не по скруглению, а по естественному контуру, то есть по прямоугольнику div'a. Opera вообще обрезает только по первоначальному контуру и только огнелис справляется со своей задаче.

Выглядит все примерно так:
<div class=".b-knowledge__elemen">
      <div class="element-cover__left"></div>
      <div class="element-cover__leftX2"></div> <!-- Чтобы не один :) -->
</div>


Код:

.b-knowledge__element{
    overflow:hidden;
    padding: 10px 4px;
    margin-top: 25px;
    margin-left: -55px;
    display:inline-block;
    background: #000;
}

...

.element-cover__left{
    position:relative;
    display:block;
    background: url(../images/book-cover.png) no-repeat -13px -3px;
    height: 200px;
    width: 100%;
    padding: 20px 7px 0px 0px;
    margin-top: -210px;
    margin-left: -13px;
}

Может быть, у кого-то есть JS решение подобной задачи?

ksa 08.04.2011 16:07

doniv, сделай картинку с прозрачным центром... При наложении поверх чего-либо - будет видна только центральная часть.

doniv 08.04.2011 16:13

Цитата:

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

Такой хак не прокатит.
Во-превых, внутри блока находятся блоки с активными элементами. Во-вторых, снаружи блока реализован сложный фон (черз дата url), и если накладывать картинку с таким фоном, а она судя по радиусу будет довольно большая, то это очень плохо скажется на производительности.

ksa 08.04.2011 16:30

doniv, тогда остаётся только страдать...

Aetae 08.04.2011 17:16

...ещё пяток-другой лет...

0931454574 08.04.2011 18:56

а можно сделать png с вырезов внутри ? и под него мостить, тоесть его в з индекс.

doniv 08.04.2011 19:16

Цитата:

Сообщение от 0931454574 (Сообщение 99888)
а можно сделать png с вырезов внутри ? и под него мостить, тоесть его в з индекс.

Нет, к сожалению, содержимое блоком постоянно меняется. Можно, конечно, обрезать содержимое (изображения), под нужный контур на уровне сервера, но такое решение как крайность, скорее.

poorking 08.04.2011 19:29

Может этой ситуации можно как нибудь избежать? Например сама дыра в виде круга - это будет прозрачная область в png, под картинкой например ваши блоки, а на картинку положить map, но если у вас там в блоках совсем уж активное содержимое, например куча кнопочек, которые могут менять свое положение и проч, тогда конечно не подойдет. Хотя.. можно вместе с изменением содержимого этих блоков и map генерировать, трудненько будет, но раз уж такой дизайн

doniv 08.04.2011 19:34

Цитата:

Сообщение от poorking (Сообщение 99901)
Может этой ситуации можно как нибудь избежать? Например сама дыра в виде круга - это будет прозрачная область в png, под картинкой например ваши блоки, а на картинку положить map, но если у вас там в блоках совсем уж активное содержимое, например куча кнопочек, которые могут менять свое положение и проч, тогда конечно не подойдет. Хотя.. можно вместе с изменением содержимого этих блоков и map генерировать, трудненько будет, но раз уж такой дизайн

Спасибо, о мапе я как-то забыл. Однако, остается все та же проблема о которой я уже писал "снаружи блока реализован сложный фон (через дата url), и если накладывать картинку с таким фоном, а она судя по радиусу будет довольно большая, то это очень плохо скажется на производительности".

В общем, теперь есть о чем подумать :)

poorking 08.04.2011 19:50

doniv,
Можно любые события на map area повторить на блоках под картинкой. На map определяем над каким элементом будет выполняться действие (каждая area соответствует определенному блоку) и потом это событие на area (пусть e) используем на нужном элементе elem.dispatchEvent(e), как то так, но это просто мысли

PS а по поводу дырки, может есть возможность в вашем этом сложном фоне сделать эту дырку?


Часовой пояс GMT +3, время: 19:45.