Тени от блоков (таблиц) на неоднородном фоне

serdeles · September 25, 2007

Есть бэкграунд, который представляет собой узор. Например, такой: , или такой: .

Как при помощи css сделать тень на таком фоне?

Интересует корректная работа результата как минимум в ИЕ, Firefox, Opera и Safari.

Спасибо.

Fu-tai · September 25, 2007

А как на черном листе, сделать тень от белого куба???

А по существу тень реально сделать токо картинкой. пока покрайней мере. Или вкладывать тенеобразующее в слой, черный с заданным фильтром. Но на таком фоне вообще не имеет смысла делать нень!

Чего тенить если источника света нет?

serdeles · September 25, 2007

Ясно, что картинкой. Но png с прозрачностью в качестве фона (типа тень) не работает в ИЕ. Gif на неоднородном фоне тоже бесполезен.

Тень имеет место быть, если например, под "джинсовым" фоном находится более светлый фон, скажем, светло-серый. А тень отбрасывает таблица, которая находится поверх обоих частей бэкграунда.

В данном случае смысл есть. Просто хотелось бы понять, возможно ли сделать тень на неоднородном фоне с помощью css, или об этом можно забыть, и думать над другими вариантами решения.

"вкладывать тенеобразующее " - если можно поподробнее об этом, может, подойд?т... Кстати, а фильтры будут корректно работать в Opera или Firefox?

serdeles · September 25, 2007

Видимо смысл делать тень есть, просто не все знают, как...

Вот, наш?л информацию о тенях посредством css на паттерных фонах. Может, кому поможет.

Dimitry Wolotko · September 25, 2007

Вы выбрали какой - либо вариант?

Просто любопытно.

Fu-tai · September 25, 2007

То serdeles Ну это не ново!

И все равно бредово и слишком громоздко! на одну только тень уйдет часа четыре мучений. Она того явно не стоит!

Dimitry Wolotko · September 25, 2007

Смотря сколько платят.

Если есть задача - сделать и при этом платят - то почему бы и нет.

serdeles · September 25, 2007

To Fu-tai: вполне стоит :-) Смотря в ч?м измерять. Особенно если эти часы мучений в будущем помогут сэкономить массу времени и усилий.

To Dimitry Wolotko: для меня важна сама методика, а не готовое решение. На сайте Лебедева приведены примеры, которые годятся в основном для текста, форм ввода данных и т. д, то есть они не абсолютно универсальны, но при внимательном изучении кода, думаю, приспособлю под свои нужды. Лично я склоняюсь к варианту с табличным формированием тени, так как таблицы в мо?м случае актуальнее. Но в будущем, думаю, и варианты с блоками тоже пригодятся.

Правильно вы сказали: задача есть и деньги платят )))

Если бы все задачи были банальными и л?гкими, то какой же кайф от работы?

А после удачного завершения кайф вообще немереный :-)

Dimitry Wolotko · September 25, 2007

Жд?м вашу работу на "осмотр".

Удачи.

Топик в проблемы верстки.

rmaksim · September 25, 2007

если известна ширина блока с тенью и

если делать тень простую (не объемную, так сказать...)

то может вот так кому сгодиться... если пошаманить... то может и краше выйдет...

p.s. в примере и тень как бы есть, и цвет ее можно менять (ну мало ли кому надо синяя тень ), ну и ширину само собой...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
*{
 margin: 0;
 padding: 0;
}
body{
 background: url(http://i29.photobucket.com/albums/c300/serdeles/bg-jeans.gif);
}
.box-out2,
.box-out{
 position: absolute;
 top: 33px;
 left: 60px;
 width: 160px;
 padding-bottom: 10px;
 overflow: hidden;
}
.box-out2{
 top: 10px;
 left: 10px;
 z-index: 1;
}
.box-inner{
 position: relative;
 top: 10px;
 left: 10px;
 width: 150px;
}
.text{
 position: relative;
 top: -10px;
 left: -10px;
 width: 140px;
 padding: 5px;
 background-color: #ffc;
 z-index: 1;
}
.sha{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 10000px;
 background-color: #000;

 opacity: .3;
 *filter:alpha(opacity=30);
}
.box-out2 .sha{
 background-color: #00f;
}
-->
</style>
</head>
<body>

<div class="box-out">
 <div class="box-inner">
 <div class="text"><p>1 23 456 789 1 23 456 789 1 23 456 789 1 23 456 789 </p></div>
 <div class="sha"></div>
 </div>
</div>

<div class="box-out2">
 <div class="box-inner">
 <div class="text"><p>1 23 456 789 1 23 456 789 1 23 4</p></div>
 <div class="sha"></div>
 </div>
</div>

</body>
</html>

YETI · September 26, 2007

Ясно, что картинкой. Но png с прозрачностью в качестве фона (типа тень) не работает в ИЕ. Gif на неоднородном фоне тоже бесполезен.

Для ИЕ есть фиксы, тогда он их нормально выводит.

serdeles · September 26, 2007

To: rmaksim ? прикольно, спасибо :-)

Но в мо?м случае нужна именно объ?мная тень... Приходится с png заморачиваться :-)

To: YETI ? да, я юзаю для png java script, который помогает корректно отображать png с прозрачностью в ИЕ, но когда доходит до фоновых изображений, везде обломы... Если у вас есть примеры фиксов, был бы благодарен, если бы поделились: весьма полезным может оказаться не только для меня, но, думаю, и для многих. Очень важно, чтобы их можно было юзать в качестве, напрмер, тех же теней на паттерных бэкграундах в качестве заливки для таблицы или блока.

Sign In

Тени от блоков (таблиц) на неоднородном фоне

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information