ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / фоны, тени, z-index
19 сообщений из 19, страница 1 из 1
фоны, тени, z-index
    #38590128
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
Всем привет.
Есть такая структура страницы:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<body>
<div class="wrap">
 
   <div class="item">
   </div>
 
</div>
</body>



для класса item заданы сложные наклонные тени, заданы они подобным способом:

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
.item:before,
.item:after {
        content:"";
        position:absolute;
        z-index:-2;
        bottom:10px;
        left:10px;
        width:47%;
        height:20%;
        max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
         
.item:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}



как видно, чтобы от псевдоэлементов(наклонные блоки) торчала только тень, он уводится на дальний слой с помощью z-index: -2;
Проблемка заключается в том, что если я задам тень диву с классом wrap, то наши тени пропадают, так как они уходят на невидимый слой, за наш заданный фон. Самому wrap задавать отрицательный z-index нельзя, так как внутри спрячется и весь контент.
Я в свое время решил проблему так. Создал еще один блок с id=background


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
<body>
<div id="background"></div>
<div class="wrap">
 
   <div class="item">
   </div>
 
</div>
</body>



И прописал ему следующие стили:

Код: css
1.
2.
3.
4.
5.
  background: linear-gradient(110deg, #F3F3F3 1%, #F3F3F3 765px, #FFFFFF 766px, #FFFFFF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 900px;
    position: absolute;
    width: 1000px;
    z-index: -10;



Все бы хорошо, но как видите, высота задана 900px, такую же высоту я задавал для wraper как min-height, чтобы якобы прилепить футер книзу, но потом я понял, что это не комильфо и прилепил футер к низу способом с отрицательным padding. Пытался я заменить height:900px на height:100%, но высота блока с идентификатором background получалась размером с экран, это и понятно, ведь внутри нет содержимого.

Как можно поменять структуру или какие css свойства применить, чтобы был и фон и не пропадали тени у элементов item?

Чтобы было наглядней, как должно выглядеть, вот сайт: musaget.net
В этой версии футер не является плавающим и поэтому мой трюк с доп блоком с id=background работает, но, как я сказал, я сделал футер прилепленным к низу нормальным способом, а не костылем.

На данном сайте wraper=all, background=background, item=item
...
Рейтинг: 0 / 0
19.03.2014, 08:34
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590145
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9IКак можно поменять структуру или какие css свойства применить, чтобы был и фон и не пропадали тени у элементов item?
У тебя размер фиксированый - делай тени обычной, прозрачной картинкой и будет тебе счастие...
...
Рейтинг: 0 / 0
19.03.2014, 08:58
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590169
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
я как раз делал плавающий размер блоков, не уверен, что это сильно нужно, так как сайт все равно крошится при уменьшении ширины, но сами блоки все таки ведут себя нормально.
...
Рейтинг: 0 / 0
19.03.2014, 09:38
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590181
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9Iя как раз делал плавающий размер блоков
Тогда с картинками будет не просто... Придется вводить какой-то "минимальный" размер... Да и саму тень разбивать на части...
В любом случае у тебя три путЯ...
1. ЦСС
2. Картинки
3 ЦСС+картинки

Больше ничего и нет...
...
Рейтинг: 0 / 0
19.03.2014, 09:45
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590188
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
я избрал путь css и у меня возникли трудности, именно поэтому я здесь.
Неужели нельзя какой-то хак прописать для того же блока c id=background, чтобы он занимал собой весь контент по высоте, но при этом был на дальнем слое, т.е. с отрицательным z-index
...
Рейтинг: 0 / 0
19.03.2014, 09:49
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590191
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
Я не верю, что здесь можно обойтись только js скриптом, который меряет высоту блока all и задает ее блоку background
...
Рейтинг: 0 / 0
19.03.2014, 09:50
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590198
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9IНеужели нельзя какой-то хак прописать для того же блока c id=background, чтобы он занимал собой весь контент по высоте, но при этом был на дальнем слое, т.е. с отрицательным z-index
Давай тогда абстрагируемся от теней...

Опиши ситуацию т.с. "на дивах", что именно хочешь получить... А потом можно съориентироваться по теням...
...
Рейтинг: 0 / 0
19.03.2014, 09:55
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590213
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9IКак можно поменять структуру или какие css свойства применить, чтобы был и фон и не пропадали тени у элементов item?
Пойдет?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: yellow;
	z-index: 1;
}
.wrap {
	position: relative;
	z-index: 2;
	/* для красоты */
	text-align: center;
}
.item:before,
.item:after {
	content:"";
	position:absolute;
	z-index:-2;
	bottom:10px;
	left:10px;
	width:47%;
	height:20%;
	max-width:300px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
.item:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="background"></div>
<div class="wrap">
   <div class="item">item</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
19.03.2014, 10:05
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590224
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
надо, чтобы ширина background совпадала с шириной wrap и была отпозиционированна так же.
Весь этот геморой из-за наклонного фона, если делать для блока без фиксированной ширины и позиции, то этот фон будет ездить при изменении размера окна.
Вот, посмотрю, есть же рабочий сайт: musaget.net
Также я создал эту структуру тут: http://jsfiddle.net/makc9I/wmt9A/2/
...
Рейтинг: 0 / 0
19.03.2014, 10:19
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590253
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9Iнадо, чтобы ширина background совпадала с шириной wrap и была отпозиционированна так же.
Как вариант...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
.wrap {
	position: relative;
	/* для красоты */
	text-align: center;
}
#background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: yellow;
	z-index: 1;
}
.item {
	position: relative;
	z-index: 2;
}
#item_tab {
	/* Размер подобрать экспериментально */
	height: 25px;
}
.item:before,
.item:after {
	content:"";
	position:absolute;
	z-index:-2;
	bottom:10px;
	left:10px;
	width:47%;
	height:20%;
	max-width:300px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
.item:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="wrap">
	<div id="background"></div>
	<div class="item">item</div>
	<div id="item_tab"></div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
19.03.2014, 10:38
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590282
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
какую роль выполняет item_tab, не могу понять
...
Рейтинг: 0 / 0
19.03.2014, 10:51
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590336
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9Iкакую роль выполняет item_tab, не могу понять
Он увеличивает wrap на "высоту тени"... Она ведь "торчит" из него.
А если нормально подобрать его высоту - тень "торчать" из него не будет...
...
Рейтинг: 0 / 0
19.03.2014, 11:32
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590422
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
Проблема решена.
Решение до смешного простое, но совсем не очевидное для меня:
Необходимо для html, body, #background прописать стиль
Код: css
1.
min-height:100%;


Ранее там было написано
Код: css
1.
height:100%;


и если менять height на min-height только у #background, результата это не давало
...
Рейтинг: 0 / 0
19.03.2014, 12:36
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590460
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
Рано радовался. Смена height на min-height привела к тому, что футер перестал прижиматься к низу.
...
Рейтинг: 0 / 0
19.03.2014, 12:55
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590512
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9I , для нормальной работы футера используй див с
Код: css
1.
min-height: 100%;


Он-то и будет твоим body...
...
Рейтинг: 0 / 0
19.03.2014, 13:22
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38590523
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9IРано радовался.
Радуйся...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
#body {
	position: relative;
	min-height: 100%;
}
#footer,
#footer_tab {
	width: 100%;
	height: 100px;
}
#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='body'> 
	<div id='footer_tab'></div>
	<div id='footer'></div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
19.03.2014, 13:27
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38591437
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
да вроде как так я и делал, как это решает мою проблему с фоном?
ладно, буду колупаться, разбираться, если что выйдет, напишу решение.
...
Рейтинг: 0 / 0
20.03.2014, 09:07
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38591470
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
makc9Iкак это решает мою проблему с фоном?
Простым "сложением" моих двух последних примеров...
...
Рейтинг: 0 / 0
20.03.2014, 09:47
| Ответить | Цитировать | Написать  
фоны, тени, z-index
    #38592574
makc9I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
makc9I
Гость
"слепил" ваши решения: http://jsfiddle.net/makc9I/aa66U/
...
Рейтинг: 0 / 0
21.03.2014, 09:31
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / фоны, тени, z-index
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38590460&tid=1447300]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 456ms
get topic data:
 13ms
get forum data:
 4ms
get page messages:
 76ms
get tp. blocked users:
 2ms
others: 246ms
total:  833ms
созд. / загр.: 833ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]