Цитата:
У нас есть квадрат, размеры его мы знаем, позиции от верха и от низа родителя мы тоже знаем, то-есть в CSS это все прописано, тем самым за счет экспрешена мы убираем задний фон с элемента, и добавляем бордюр элементу с нужным нам цветом. Затем уменьшаем элемент на то значение что указано в top/left. Вся эта хрень не будет увы работать если фоном сделать не просто зеленый цвет а например картинку, тогда увы получим мы хреню. |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Пришлось эмулировать gif- картинкой с прорезом центральной области по размеру вставленного блока и opacity |
Цитата:
http://jsbin.com/ekufop/6 мне что-то подсказывает, что нужно пооперировать с Chroma filter на #above (красном). Но успехом это не увенчалось. Цитата:
никогда такое размытие не применял :) максимум дело доходило до 50. |
Цитата:
|
ладно, вот немного иной говнокод:
<!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>
|
поправил немного :)
|
вот даже проблему с задним фоном решил, тоесть если у родителя другой цвет будешь ставить скриптом, или вообще картинку, то все будет чики-поки.
|
Цитата:
хм.. три элемента вместо одного.. это всё-же лучше бажёного VML, где отваливается правая-нижняя часть у rect в IE8. немного поигрался... но не понял, почему пропадает зеленый блок (т.е. скрывается за копией красного) и зачем нужна эта строчка : this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling): this.parentNode.appendChild(this.elAppended), ... и почему нельзя вынести свойства в таблицу стилей :blink: это меня удивило больше всего Засейвил здесь: http://jsbin.com/ekufop/8/ Цитата:
PS завтра докурю и добью box-shadow в IE. сейчас я уже начинаю тупить, и завтра рано вставать. спасибо за помощь. |
| Часовой пояс GMT +3, время: 02:21. |