Цитата:
Цитата:
C другой стороны, как при таком раскладе рендерить inset box-shadow... |
Цитата:
|
Честно говоря не вижу причины не сделать так и не парить мозги:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>:)</title>
<style>
#above, #below {
width: 300px;
height: 300px;
}
#above {
position: relative;
top: 10px;
left: 15px;
}
#below {
background-color: green;
position: absolute;
top: 20px;
left: 20px;
}
#content{
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
background-color: red;
}
</style>
</head>
<body>
<div id="above">
<div id="below"></div>
<div id="content">Hello World</div>
</div>
</body>
</html>
|
ну вот ради теста решил добавить тень, вроде идентично получилось:
<!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: black;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
box-shadow: 5px 5px 8px rgba( 0, 0, 0, 0.6 );
/*IE7*/
filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4);
/*IE8*/
-ms-filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4);
/* весь этот говнокод ради ИЕ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>
Идеальное на мой взгляд решение. Спасибо melky, за решение, сам буду пользоваться им. |
Оффтоп...
Но мрак какой-то! Мы вдвоём, я - верстальщик, и второй js-программист-верстальщик, сумели через нашего очень вменяемого начальник протащить решение о том что наша (очень серъёзная) компания больше не поддерживает IE6-7, мы раньше пытались смотреть чтобы хотя бы структура не ломалась в старых ослах (и плевать на плюшки) - а теперь официально забили (даже тестировщики не проверяют)! Пусть хоть всё там "едет" - мы делаем рекламу для Майкрософта для IE9 - даже "родители" официально открещиваются от своего детища - но у нас есть всплывашка "Ваш браузер устарел"... Одна беда - надо IE8 поддерживать (ради тупоголовых пользователей XP) - это даже не 7-ой, но все равно... Хотя даже менеджеры мирятся с тем что border-radius реализуется "только картинками и поэтому ну его нафиг!" А ведь это "коммерция", и уж они-то как никто лоюбят считать пользователей... Раньше я тоже страдал перфекционизмом, и вылизывал даже для IE6 (хотя бы ради своего эго), но потом пошли крупные проекты косяком, времени стало не хватать - и я забил на IE6-7 (сторонние проекты вообще смотрю только в файербаге) - и никто пока не возмущался... Может и Вам стоит задуматься? Тем более, судя по всему, Вы не так хорошо в вёрстке разбираетесь - а поддержка IE6 требует такого же количества энциклопедических знаний вёрстки для IE6, как и весь CSS3 (всякие там "3px gap", "!important", "min-height" etc...)... Добрый совет - не захламляйте себе голову - год-два и кол-во пользователей IE6-7 станет 0,1% - а своего личного времени Вы впустую убъёте... Начните уж тогда и Amaya поддерживать - а чё? Самый правильный браузер! |
Цитата:
Люди если вы пытаетесь каждый раз говорить подобные фразы, то это лишь лишний раз доказывает обратное. Человек с опытом, никогда подобного не скажет. А что насчет поддержки ИЕ, это уж мы как нибудь сами решим отказаться от него или нет. И лишний раз говорить об этом нет смысла, может вам легче становится от того что вы в каждой теме об этом напоминаете, или просто пытаетесь получить кайф от того что выговорились. Об этом всем давно известно, какой смысл сотню раз пережевывать одно и тоже. И хвать делать из себя умных. Умнее вы для нас не станете все равно, ибо в инете все равны. И тут нет глупых и умных. |
Nanto,
Вот тут я с тобой на 200% согласен! В жопу отстой весь, всякие 6-7, у меня на работе так, ниже 8 заглушка с текстом типа обновите браузер если не хочешь можешь отключить и попадёшь на разваленный сайт. 8 главное чтоб макет не развалился и можно было хоть както пользоваться сатом, 9 должен быть нормальный на 95% всякие анимации cssные в нём не будут работать и градиенты не особо парюсь. остальные браузеры исключительно последние версии. |
Я вообще сейчас подумываю начать грид, флекс бокс и т.д. юзать попробовать, а для 9 и ниже скриптом эмулировать вроде есть уж готовые решения.
|
devote,
Холиварить будем? Таблицы любите? Расскажите-ка мне об особенностях поведения таблиц ("ведь это так кроссбраузерно") в разных браузерах при переполнении ячейки контентом... Где ячейка раздвинется (не смотря на заданную ширину), а где обрежет, а где перенсёт на следующую строку... Оптимально всё это прокуривать? Тогда джедайствуйте, только потом не просите пощады... ;) |
Seva1986,
Так есть. Только насчёт 9 не согласен - да с transition, animation проблемы, но с этим и так рановато спешить! Градиенты в 9 работают, только border-radius при этом не срабатывает, поэтому ему надо "скармливать" base64 - я вот пользуюсь кроссбраузерным генератором - ни разу не подводил: http://www.colorzilla.com/gradient-editor/ А со скриптами - больше возни получится!.. Ну это вообще стиль... Как кто кодит... Я пишу основную вёрстку под "тройку браузеров" (с плюшками CSS3), то что можно, прописываю отдельно для IE9, смотрю чтобы не разваливалось в 8-ом... И всё! P.S. Это слава богу что Microsoft в своё время продавил в консорциуме условные комментарии - кому так охота поддерживать старых ослов - можете писать для них отдельную вёрстку! Слабо? |
| Часовой пояс GMT +3, время: 00:42. |