06.06.2012, 23:02
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от melky
|
|
devote, абалденно. Не могли бы Вы пояснить, почему он работает?
|
Все очень просто, в реале z-index в ИЕ7 работает, это можно увидеть наполнив контентом красный квадрат, тоесть текст ляжет поверх зеленого квадрата, но вот заливку заднего фона ИЕ7 не сует под элемент, поэтому засчет экспрешенов я решил вопрос так.
У нас есть квадрат, размеры его мы знаем, позиции от верха и от низа родителя мы тоже знаем, то-есть в CSS это все прописано, тем самым за счет экспрешена мы убираем задний фон с элемента, и добавляем бордюр элементу с нужным нам цветом. Затем уменьшаем элемент на то значение что указано в top/left. Вся эта хрень не будет увы работать если фоном сделать не просто зеленый цвет а например картинку, тогда увы получим мы хреню. |
|
06.06.2012, 23:06
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от devote
|
|
У нас есть квадрат, размеры его мы знаем, позиции от верха и от низа родителя мы тоже знаем, то-есть в CSS это все прописано, тем самым за счет экспрешена мы убираем задний фон с элемента, и добавляем бордюр элементу с нужным нам цветом. Затем уменьшаем элемент на то значение что указано в top/left.
|
То есть, сплющиваем элемент по width\height, и возвращаем ему размеры с помощью borderWidth? Я правильно понял?
|
Сообщение от devote
|
|
Вся эта хрень не будет увы работать если фоном сделать не просто зеленый цвет а например картинку, тогда увы получим мы хреню.
|
Не думаю, что у свойства box-shadow может быть картинка  отличное решение. |
|
06.06.2012, 23:07
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от melky
|
|
То есть, сплющиваем элемент по width\height, и возвращаем ему размеры с помощью borderWidth? Я правильно понял?
|
ага все верно |
|
06.06.2012, 23:16
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от melky
|
|
Этот код относится к имплементации box-shadow для IE. Так "странно", потому что это единственный адекватный и нетормозящий способ.
|
В принципе box-shadow ваще самая тормозная операция во всех браузерах = тут приятель сделал размазку у box-shadow в 300-400 пиксел(типо фона, как в модальном окошке) дык окно гасло и всплывало с ужасным тормозом
Пришлось эмулировать gif- картинкой с прорезом центральной области по размеру вставленного блока и opacity |
|
06.06.2012, 23:18
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Сообщение от devote
|
|
ага все верно
|
хм... дело дошло до обработки "тени" фильтрами.В IE 7 появляется уродливая обводка белым вокруг #above (красный).
http://jsbin.com/ekufop/6
мне что-то подсказывает, что нужно пооперировать с Chroma filter на #above (красном). Но успехом это не увенчалось.
|
Сообщение от Deff
|
В принципе box-shadow ваще самая тормозная операция во всех браузерах = тут приятель сделал размазку у box-shadow в 300-400 пиксел(типо фона, как в модальном окошке) дык окно гасло и всплывало с ужасным тормозом
Пришлось эмулировать gif- картинкой с прорезом центральной области по размеру вставленного блока и opacity
|
этот "элемент гламура" безбожно тормозит в Chrome при анимациях box-shadow. Не знаю, пофиксили, или нет, но тормоза в настройках Chrome я ощущал.
никогда такое размытие не применял максимум дело доходило до 50.
Последний раз редактировалось melky, 06.06.2012 в 23:20.
|
|
06.06.2012, 23:28
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от melky
|
|
этот "элемент гламура" безбожно тормозит в Chrome при анимациях box-shadow. Не знаю, пофиксили, или нет, но тормоза в настройках Chrome я ощущал.
|
Везде тормозит -во всех браузах - делал галлерею на shadow -box - захотелось обвести бордеры фоток тенью, дык если тень более 6 пиксел на 5-8 фотках - то воспроизведение этих бордюров на секунды тормозит страницу |
|
06.06.2012, 23:53
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
ладно, вот немного иной говнокод:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>:)</title>
<style>
* { margin:0; padding:0; }
#above, #below {
width: 300px;
height: 300px;
}
#above {
background-color: red;
position: relative;
top: 10px;
left: 15px;
}
#below {
background-color: green;
position: absolute;
top: 20px;
left: 20px;
z-index: -1;
/*IE7*/
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
/*IE8*/
-ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
/* весь этот говнокод ради ИЕ7 */
govnokod: expression(
this.elAppended?(
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor
):(
this.elAppended=document.createElement('div'),
this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling):
this.parentNode.appendChild(this.elAppended),
this.elAppended.style.position='absolute',
this.elAppended.style.width='100%',
this.elAppended.style.height='100%',
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor,
this.elAppended.style.left=0,
this.elAppended.style.top=0,
this.elAppended.style.zIndex=-1
)
);
}
</style>
</head>
<body>
<div id="above">
Hello World
<div id="below"></div>
</div>
</body>
</html>
Последний раз редактировалось devote, 07.06.2012 в 00:11.
|
|
06.06.2012, 23:56
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
поправил немного |
|
07.06.2012, 00:12
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
вот даже проблему с задним фоном решил, тоесть если у родителя другой цвет будешь ставить скриптом, или вообще картинку, то все будет чики-поки.
|
|
07.06.2012, 00:20
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от devote
|
|
поправил немного
|
хм... теперь expression один раз создаёт "заготовку" - элемент с такими же размерами, но без содержимого, который перекрывает зелёный элемент (тень), и находится прямо за красным элементом (отбрасывающим тень).
хм.. три элемента вместо одного.. это всё-же лучше бажёного VML, где отваливается правая-нижняя часть у rect в IE8.
немного поигрался... но не понял, почему пропадает зеленый блок (т.е. скрывается за копией красного)
и зачем нужна эта строчка :
this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling):
this.parentNode.appendChild(this.elAppended),
... и почему нельзя вынести свойства в таблицу стилей  это меня удивило больше всего
Засейвил здесь:
http://jsbin.com/ekufop/8/
|
Сообщение от devote
|
|
вот даже проблему с задним фоном решил, тоесть если у родителя другой цвет будешь ставить скриптом, или вообще картинку, то все будет чики-поки.
|
я тоже заметил, что элементу-копии можно не выставлять background
PS завтра докурю и добью box-shadow в IE. сейчас я уже начинаю тупить, и завтра рано вставать. спасибо за помощь.
Последний раз редактировалось melky, 07.06.2012 в 00:26.
Причина: кривая ссылка № 2
|
|
|
|
