Тень от слоя с обеих сторон.

Dezmont · October 30, 2010

Здравствуйте. Может кто-нибудь подскажет, как сделать так, чтобы от див блока фиксированной ширины, который расположен по центру, тень падала в обе стороны?

В одну то сторону она без проблем "роняется" с помощью -webkit-box-shadow: black 3px 3px 4px; вот такой строчки в CSS свойствах слоя. Но это получается только с правой стороны, а мне нужна тень ещё и слева.

Как тут: kinopisk.ru, http://robertnyman.com/

psywalker · October 30, 2010

http://psywalker.ru/Forum/JS/Primitive/Dom...dow-Text/1.html

Dezmont · October 30, 2010

http://psywalker.ru/Forum/JS/Primitive/Dom...dow-Text/1.html

Извините конечно, но вариант какой-то не очень. ) Тень выглядит не очень красиво.

Может перефразировать вопрос так: Можно ли как нибудь с помощью свойств box-shadow создать тень с обеих сторон?

psywalker · October 30, 2010

<!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>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		div {
			background: #900;
			-moz-box-shadow: 10px -3px 15px #222;
			height: 75px;
			margin: 20px;
			width: 75px;
		 }
	</style>
</head>

<body>

<div></div>


</body>
</html>

Dezmont · October 30, 2010

Нет. Опять не то. Я ти использую это свойство, НО эта тень только с 2 сторон. А мне нужно, чтобы тень от этого элемента падала во все 4 стороны. Не только верхняя и правая грань, например, а все от всех четырёх граней.

psywalker · October 30, 2010

Нет. Опять не то. Я ти использую это свойство, НО эта тень только с 2 сторон. А мне нужно, чтобы тень от этого элемента падала во все 4 стороны. Не только верхняя и правая грань, например, а все от всех четырёх граней.

Покажи скриншот того, что хочешь получить.

Dezmont · October 30, 2010

Покажи скриншот того, что хочешь получить.

http://kinopisk.ru/, http://robertnyman.com/

Вот эти сайты посмотри. Там центральный блок фиксированной шириный и от него тень в обе стороны падает. На кинопоиске просто бг замостили, а на 2 сайте я не могу понять как.

psywalker · October 30, 2010

Да походу тупо там полоска 1240х1 как раз под ширину контейнера главного. Лежит она внизу и тянется вниз.

rediskavet · October 30, 2010

Ну если одному блоку нельзя установить тень со всех четырех сторон как ты говоришь(я сам не проверял), то сделай ему блок обертку и выставь этому блоку тень с недостающих сторон.

Dezmont · October 30, 2010

Ну если одному блоку нельзя установить тень со всех четырех сторон как ты говоришь(я сам не проверял), то сделай ему блок обертку и выставь этому блоку тень с недостающих сторон.

Спасибо ) Так и сделал. Захожу сюда, а тут уже ответ. =) Оперативно.

psywalker, rediskavet большое спасибо.

Serlutin · October 30, 2010

Может быть вот так?

box-shadow:0 0 3px 3px #000000;
-moz-box-shadow: 0 0 3px 3px #000000;

psywalker · October 30, 2010

Да вот я тут вариант накидал, можно так вообще сделать.

<!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>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		div#wrap {
			margin: 60px auto;
			background: #900;
			-moz-box-shadow:#102030 0px 12px 20px 5px;
			width: 555px;
		}
		 div#wrap div {
			background: #900;
			position: relative;
			top: 20px;
			padding: 0 20px;
		}
		div#wrap p { position: relative; top: -10px;}
	</style>
</head>

<body>

<div id="wrap">
	<div>
		<p>2010 © Darberry. Скидки каждый день!

Разработано
Злыми марсианами

ДарБери — это лучшие заведения вашего города с огромными скидками!

Каждый день мы предлагаем что-то новое: рестораны, салоны красоты, картинг, спа, кинотеатры. И все это по уникальной цене. Зарегистрируйся и следи за новыми предложениями!
2010 © Darberry. Скидки каждый день!

Разработано
Злыми марсианами

ДарБери — это лучшие заведения вашего города с огромными скидками!

Каждый день мы предлагаем что-то новое: рестораны, салоны красоты, картинг, спа, кинотеатры. И все это по уникальной цене. Зарегистрируйся и следи за новыми предложениями!
</p>
	</div>
</div>


</body>
</html>

sigma77 · October 31, 2010

-moz-box-shadow: 0 0 1em gold;
-webkit-box-shadow: 0 0 1em gold;
box-shadow: 0 0 1em gold;

https://developer.mozilla.org/en/css/-moz-box-shadow

Sign In

Тень от слоя с обеих сторон.

Question

Link to comment

Share on other sites

12 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information