Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / фоны, тени, z-index / 19 сообщений из 19, страница 1 из 1
19.03.2014, 08:34
    #38590128
makc9I
makc9I
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
Всем привет.
Есть такая структура страницы:

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

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

Опиши ситуацию т.с. "на дивах", что именно хочешь получить... А потом можно съориентироваться по теням...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2014, 10:05
    #38590213
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
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:19
    #38590224
makc9I
makc9I
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
надо, чтобы ширина background совпадала с шириной wrap и была отпозиционированна так же.
Весь этот геморой из-за наклонного фона, если делать для блока без фиксированной ширины и позиции, то этот фон будет ездить при изменении размера окна.
Вот, посмотрю, есть же рабочий сайт: musaget.net
Также я создал эту структуру тут: http://jsfiddle.net/makc9I/wmt9A/2/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2014, 10:38
    #38590253
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
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:51
    #38590282
makc9I
makc9I
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
какую роль выполняет item_tab, не могу понять
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2014, 11:32
    #38590336
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
makc9Iкакую роль выполняет item_tab, не могу понять
Он увеличивает wrap на "высоту тени"... Она ведь "торчит" из него.
А если нормально подобрать его высоту - тень "торчать" из него не будет...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2014, 12:36
    #38590422
makc9I
makc9I
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
Проблема решена.
Решение до смешного простое, но совсем не очевидное для меня:
Необходимо для html, body, #background прописать стиль
Код: css
1.
min-height:100%;


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


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


Он-то и будет твоим body...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2014, 13:27
    #38590523
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
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
| Ответить | Цитировать | Написать  
20.03.2014, 09:07
    #38591437
makc9I
makc9I
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
да вроде как так я и делал, как это решает мою проблему с фоном?
ладно, буду колупаться, разбираться, если что выйдет, напишу решение.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.03.2014, 09:47
    #38591470
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
makc9Iкак это решает мою проблему с фоном?
Простым "сложением" моих двух последних примеров...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.03.2014, 09:31
    #38592574
makc9I
makc9I
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
фоны, тени, z-index
"слепил" ваши решения: http://jsfiddle.net/makc9I/aa66U/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / фоны, тени, z-index / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 535ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1447300]:
 0ms
get settings:
 11ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 158ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 67ms
get tp. blocked users:
 2ms
others: 261ms
total:  535ms
x
x
Закрыть


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