Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2011, 16:05
Аватар для doniv
Аспирант
Отправить личное сообщение для doniv Посмотреть профиль Найти все сообщения от doniv
 
Регистрация: 02.03.2010
Сообщений: 73

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



Мне нужно, чтобы все блоки, которые выходят за скругление блока 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 решение подобной задачи?
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2011, 16:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,783

doniv, сделай картинку с прозрачным центром... При наложении поверх чего-либо - будет видна только центральная часть.
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2011, 16:13
Аватар для doniv
Аспирант
Отправить личное сообщение для doniv Посмотреть профиль Найти все сообщения от doniv
 
Регистрация: 02.03.2010
Сообщений: 73

Сообщение от ksa Посмотреть сообщение
doniv, сделай картинку с прозрачным центром... При наложении поверх чего-либо - будет видна только центральная часть.
Такой хак не прокатит.
Во-превых, внутри блока находятся блоки с активными элементами. Во-вторых, снаружи блока реализован сложный фон (черз дата url), и если накладывать картинку с таким фоном, а она судя по радиусу будет довольно большая, то это очень плохо скажется на производительности.
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2011, 16:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,783

doniv, тогда остаётся только страдать...
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2011, 17:16
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,699

...ещё пяток-другой лет...
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 08.04.2011, 18:56
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

а можно сделать png с вырезов внутри ? и под него мостить, тоесть его в з индекс.
__________________
XYZ
Ответить с цитированием
  #7 (permalink)  
Старый 08.04.2011, 19:16
Аватар для doniv
Аспирант
Отправить личное сообщение для doniv Посмотреть профиль Найти все сообщения от doniv
 
Регистрация: 02.03.2010
Сообщений: 73

Сообщение от 0931454574 Посмотреть сообщение
а можно сделать png с вырезов внутри ? и под него мостить, тоесть его в з индекс.
Нет, к сожалению, содержимое блоком постоянно меняется. Можно, конечно, обрезать содержимое (изображения), под нужный контур на уровне сервера, но такое решение как крайность, скорее.
Ответить с цитированием
  #8 (permalink)  
Старый 08.04.2011, 19:29
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Может этой ситуации можно как нибудь избежать? Например сама дыра в виде круга - это будет прозрачная область в png, под картинкой например ваши блоки, а на картинку положить map, но если у вас там в блоках совсем уж активное содержимое, например куча кнопочек, которые могут менять свое положение и проч, тогда конечно не подойдет. Хотя.. можно вместе с изменением содержимого этих блоков и map генерировать, трудненько будет, но раз уж такой дизайн
__________________
readOnly
Ответить с цитированием
  #9 (permalink)  
Старый 08.04.2011, 19:34
Аватар для doniv
Аспирант
Отправить личное сообщение для doniv Посмотреть профиль Найти все сообщения от doniv
 
Регистрация: 02.03.2010
Сообщений: 73

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

В общем, теперь есть о чем подумать
Ответить с цитированием
  #10 (permalink)  
Старый 08.04.2011, 19:50
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Печать невидимых блоков mixeeff Events/DOM/Window 7 11.03.2009 11:41