07.06.2012, 00:48
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Сообщение от devote
|
Nanto,
суть данного решения который пытается решить melky, заключается в том, что он удобен тем что можно легко удалить блок вместе с его тенями и прочей хренью и DOM дерева, то-есть удалив элемент #above он за собой потянет и все то что с ним связано. И это очень удобно, нежели пихать таким образом:
<div id="above">
Hello World
</div>
<div id="below"></div>
где придется удалять и тень и элемент отдельно.
|
вот вот. хотя, может быть было бы проще сделать box-shadow через VML.
|
Сообщение от Deff
|
melky,
мну с тенями скок не бодался приходится делать opacity и gif (или, что тож самое - png 8-ричный) ежели кроссбраузерно
|
этот способ (который пытается родиться уже 4 страницы) учитывает прозрачность тени  достаточно добавить к ней фильтр Alpha, и можно использовать rgba в качестве цвета.
C другой стороны, как при таком раскладе рендерить inset box-shadow...
Последний раз редактировалось melky, 07.06.2012 в 00:52.
|
|
07.06.2012, 00:54
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от melky
|
|
суть данного решения который пытается решить melky, заключается в том, что он удобен тем что можно легко удалить блок вместе с его тенями и прочей хренью и DOM дерева, то-есть удалив элемент #above он за собой потянет и все то что с ним связано. И это очень удобно, нежели пихать таким образом:
|
не проще ли обернуть всю трихомудь еще одним div(oм) и удалять её не мучая себя, и независимо от взаимного расположения внутренностей ? |
|
07.06.2012, 00:58
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
Честно говоря не вижу причины не сделать так и не парить мозги:
<!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>
__________________
29375, 35
|
|
07.06.2012, 01:00
|
|
что-то знаю
|
|
Регистрация: 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: 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, за решение, сам буду пользоваться им. |
|
07.06.2012, 02:07
|
|
Профессор
|
|
Регистрация: 21.12.2010
Сообщений: 243
|
|
|
Оффтоп...
Но мрак какой-то! Мы вдвоём, я - верстальщик, и второй 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 поддерживать - а чё? Самый правильный браузер!
|
|
07.06.2012, 03:08
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Nanto
|
|
Тем более, судя по всему, Вы не так хорошо в вёрстке разбираетесь
|
Что меня убивает больше всего, дык это то что каждый наровит показать какой он профи, высказав всем что, все неучи один он опытный.
Люди если вы пытаетесь каждый раз говорить подобные фразы, то это лишь лишний раз доказывает обратное. Человек с опытом, никогда подобного не скажет.
А что насчет поддержки ИЕ, это уж мы как нибудь сами решим отказаться от него или нет. И лишний раз говорить об этом нет смысла, может вам легче становится от того что вы в каждой теме об этом напоминаете, или просто пытаетесь получить кайф от того что выговорились. Об этом всем давно известно, какой смысл сотню раз пережевывать одно и тоже. И хвать делать из себя умных. Умнее вы для нас не станете все равно, ибо в инете все равны. И тут нет глупых и умных. |
|
07.06.2012, 03:11
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Nanto,
Вот тут я с тобой на 200% согласен!
В жопу отстой весь, всякие 6-7, у меня на работе так, ниже 8 заглушка с текстом типа обновите браузер если не хочешь можешь отключить и попадёшь на разваленный сайт. 8 главное чтоб макет не развалился и можно было хоть както пользоваться сатом, 9 должен быть нормальный на 95% всякие анимации cssные в нём не будут работать и градиенты не особо парюсь. остальные браузеры исключительно последние версии.
|
|
07.06.2012, 03:18
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Я вообще сейчас подумываю начать грид, флекс бокс и т.д. юзать попробовать, а для 9 и ниже скриптом эмулировать вроде есть уж готовые решения.
|
|
07.06.2012, 03:43
|
|
Профессор
|
|
Регистрация: 21.12.2010
Сообщений: 243
|
|
devote,
Холиварить будем? Таблицы любите? Расскажите-ка мне об особенностях поведения таблиц ("ведь это так кроссбраузерно") в разных браузерах при переполнении ячейки контентом... Где ячейка раздвинется (не смотря на заданную ширину), а где обрежет, а где перенсёт на следующую строку...
Оптимально всё это прокуривать? Тогда джедайствуйте, только потом не просите пощады...
|
|
07.06.2012, 03:53
|
|
Профессор
|
|
Регистрация: 21.12.2010
Сообщений: 243
|
|
Seva1986,
Так есть. Только насчёт 9 не согласен - да с transition, animation проблемы, но с этим и так рановато спешить!
Градиенты в 9 работают, только border-radius при этом не срабатывает, поэтому ему надо "скармливать" base64 -
я вот пользуюсь кроссбраузерным генератором - ни разу не подводил:
http://www.colorzilla.com/gradient-editor/
А со скриптами - больше возни получится!..
Ну это вообще стиль... Как кто кодит... Я пишу основную вёрстку под "тройку браузеров" (с плюшками CSS3), то что можно, прописываю отдельно для IE9, смотрю чтобы не разваливалось в 8-ом... И всё!
P.S. Это слава богу что Microsoft в своё время продавил в консорциуме условные комментарии - кому так охота поддерживать старых ослов - можете писать для них отдельную вёрстку! Слабо?
Последний раз редактировалось Nanto, 07.06.2012 в 03:59.
|
|
|
|
