Jump to content
  • 0

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


Dezmont
 Share

Question

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

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

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

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0
<!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>

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

<!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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy