Перейти к содержимому


Неровная Тень Сверху И Снизу Центрального Белого Блока


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 26

#1 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 02 Декабрь 2015 - 13:57

Добрый день!

Помогите пожалуйста настроить тень сверху и снизу белого блока:
Shadow1.png

Чтобы она отображалась и в товаре и везде по всем-всем страницам и не ползала влево-вправо. И чтобы не появлялась в адаптивном шаблоне.
Shadow2.png

Внизу по аналогии как вверху.

Как вот здесь:
Shadow3.png

Только чтоб правее как на рисунке, а не по-середине.

#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 02 Декабрь 2015 - 15:10

Просмотр сообщенияAndrew S. (02 Декабрь 2015 - 13:57) писал:

Добрый день!

Помогите пожалуйста настроить тень сверху и снизу белого блока:
Прикрепленный файл Shadow1.png

Чтобы она отображалась и в товаре и везде по всем-всем страницам и не ползала влево-вправо. И чтобы не появлялась в адаптивном шаблоне.
Прикрепленный файл Shadow2.png

Внизу по аналогии как вверху.

Как вот здесь:
Прикрепленный файл Shadow3.png

Только чтоб правее как на рисунке, а не по-середине.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
@media screen and (min-width: 769px) {
  .sectionblock-inner-header {box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);}
  .footer-inner-header {box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, .2);}
}


#3 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 02 Декабрь 2015 - 16:42

Просмотр сообщенияFirefly (02 Декабрь 2015 - 15:10) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
@media screen and (min-width: 769px) {
.sectionblock-inner-header {box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);}
.footer-inner-header {box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, .2);}
}

Здравствуйте, мне не такую обычную тень, а неровную надо. Чтобы была имитация приподнятости в одном месте.

И чтобы она была не внутрь, а наружу, как на рисунке 1.

#4 Alekseys

Alekseys

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 02 Декабрь 2015 - 16:59

Просмотр сообщенияAndrew S. (02 Декабрь 2015 - 16:42) писал:

Здравствуйте, мне не такую обычную тень, а неровную надо. Чтобы была имитация приподнятости в одном месте.

И чтобы она была не внутрь, а наружу, как на рисунке 1.
Здравствуйте. Такую тень можно сделать только через добавление фона, подготовьте и загрузите фон на основе gplay2.png, дав другое название изображению, и загрузите в редактор шаблонов, после чего мы поможем Вам вставить его на сайт.

#5 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 02 Декабрь 2015 - 18:00

Просмотр сообщенияAlekseys (02 Декабрь 2015 - 16:59) писал:

Здравствуйте. Такую тень можно сделать только через добавление фона, подготовьте и загрузите фон на основе gplay2.png, дав другое название изображению, и загрузите в редактор шаблонов, после чего мы поможем Вам вставить его на сайт.

А можно поверх этого фона добавить ещё один фон? Чтобы не смешивать их в редакторе. Чтобы отдельными файлами были.

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2015 - 01:20

Попробуйте следующее, в main.css найдите:
.sectionblock-inner-header {
z-index: 1;
overflow: visible;
border-bottom: 0px solid #444;
}

замените на:
.sectionblock-inner-header {
z-index: 1;
overflow: visible;
border-bottom: 0px solid #444;
box-shadow: 1px 3px 3px #999;
}

Результат должен быть следующим
123.jpg

#7 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 02:52

Просмотр сообщенияVaccina (03 Декабрь 2015 - 01:20) писал:

Попробуйте следующее, в main.css найдите:
.sectionblock-inner-header {
z-index: 1;
overflow: visible;
border-bottom: 0px solid #444;
}

замените на:
.sectionblock-inner-header {
z-index: 1;
overflow: visible;
border-bottom: 0px solid #444;
box-shadow: 1px 3px 3px #999;
}

Результат должен быть следующим
Прикрепленный файл 123.jpg

И зачем мне прямая тень, я же написал, что мне не нужна прямая тень.

#8 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 03:07

Вот смотрите, я файл тени сделал черновой:
Upper_shadow.png

Нижнюю просто отражу по вертикали.

Вот:
Lower_shadow.png

Чтоб ещё нагляднее было:
Example.png

Сообщение отредактировал Andrew S.: 03 Декабрь 2015 - 03:13


#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2015 - 03:19

.sectionblock-inner-content {
position: relative;
display: inline-block;
width: 100%;
/* background-color: #FFF; */
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;

}

замените на:
.sectionblock-inner-content {
position: relative;
display: inline-block;
width: 100%;
/* background-color: #FFF; */
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png), url('{ASSETS_IMAGES_PATH}image.png') repeat scroll center top;
background-repeat: repeat;

}

image.png замените на файл тени

#10 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 03:22

Просмотр сообщенияVaccina (03 Декабрь 2015 - 03:19) писал:

.sectionblock-inner-content {
position: relative;
display: inline-block;
width: 100%;
/* background-color: #FFF; */
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;

}

замените на:
.sectionblock-inner-content {
position: relative;
display: inline-block;
width: 100%;
/* background-color: #FFF; */
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png), url('{ASSETS_IMAGES_PATH}image.png') repeat scroll center top;
background-repeat: repeat;

}

image.png замените на файл тени

А чтобы внизу ещё симметрично было? Также чтобы. Сейчас начну внедрять.

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2015 - 03:52

.sectionblock-inner-content {
	 position: relative;
	 display: inline-block;
	 width: 100%;
	 /* background-color: #FFF; */
	 background-color: #FFF;
	 background-image: url(http://design.#.ru/bckg1.png), url('{ASSETS_IMAGES_PATH}image.png') repeat scroll center top;
	 background-repeat: repeat;
	
}

замените на:
.sectionblock-inner-content {
	 position: relative;
	 display: inline-block;
	 width: 100%;
	 padding:10px 0;
	 background-color: #FFF;
	 background-image: url(http://design.#.ru/bckg1.png), url('{ASSETS_IMAGES_PATH}image.png') no-repeat center top, url('{ASSETS_IMAGES_PATH}image2.png') no-repeat center bottom;
	 background-repeat: repeat;
	
}


#12 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 04:16

Просмотр сообщенияVaccina (03 Декабрь 2015 - 03:52) писал:

.sectionblock-inner-content {
	 position: relative;
	 display: inline-block;
	 width: 100%;
	 /* background-color: #FFF; */
	 background-color: #FFF;
	 background-image: url(http://design.#.ru/bckg1.png), url('{ASSETS_IMAGES_PATH}image.png') repeat scroll center top;
	 background-repeat: repeat;
	
}

замените на:
.sectionblock-inner-content {
	 position: relative;
	 display: inline-block;
	 width: 100%;
	 padding:10px 0;
	 background-color: #FFF;
	 background-image: url(http://design.#.ru/bckg1.png), url('{ASSETS_IMAGES_PATH}image.png') no-repeat center top, url('{ASSETS_IMAGES_PATH}image2.png') no-repeat center bottom;
	 background-repeat: repeat;
	
}

Не работает код совершенно и всё портит.

1. На всех страницах добавил вверху и внизу белую полосу (которая нее нужна) и тени вверху и внизу не отобразились.

2. В товарах убрал фон на белом (который нужен) и тени вверху и внизу не отобразились.

Не забывайте, что нужно настраивать для всех страниц и для страницы товара в отдельности.

Для удобства изменил код:
.sectionblock-inner-content {
			 position: relative;
			 display: inline-block;
			 width: 100%;
			 padding:10px 0;
			 background-color: #FFF;
			 background-image: url(http://design.#.ru/bckg1.png);
			 background-repeat: repeat;
			 background-image: url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center top;
			 background-image: url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center bottom;
		
}

И кусок какой-то лишний добавился ненужный
Lishnyaya.png

Я код подправил, основной фон в товаре восстановился, но тени не отображаются и везде добавились эти лишние куски вверху и внизу.

#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2015 - 04:38

.sectionblock-inner-content {
							 position: relative;
							 display: inline-block;
							 width: 100%;
							 padding:10px 0;
							 background-color: #FFF;
							 background-image: url(http://#.technoimp.ru/bckg1.png);
							 background-repeat: repeat;
							 background-image: url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center top;
							 background-image: url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center bottom;
				
}

замените на:
.sectionblock-inner-content {
		 position: relative;
		 display: inline-block;
		 width: 100%;
		 padding:10px 0;
		 background: url('{ASSETS_IMAGES_PATH}bckg1.png'), url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center top, url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center bottom #FFF;
	
}

далее найдите:
.body-content-center {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
/* background: #F5F5DC; */
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

замените на:
.body-content-center {
position: relative;
width: 100%;
height: 100%;
}

результат:
123.jpg

#14 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 04:55

Просмотр сообщенияVaccina (03 Декабрь 2015 - 04:38) писал:

.sectionblock-inner-content {
							 position: relative;
							 display: inline-block;
							 width: 100%;
							 padding:10px 0;
							 background-color: #FFF;
							 background-image: url(http://design.#.ru/bckg1.png);
							 background-repeat: repeat;
							 background-image: url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center top;
							 background-image: url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center bottom;
				
}

замените на:
.sectionblock-inner-content {
		 position: relative;
		 display: inline-block;
		 width: 100%;
		 padding:10px 0;
		 background: url('{ASSETS_IMAGES_PATH}bckg1.png'), url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center top, url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center bottom #FFF;
	
}

далее найдите:
.body-content-center {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
/* background: #F5F5DC; */
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

замените на:
.body-content-center {
position: relative;
width: 100%;
height: 100%;
}

результат:
Прикрепленный файл 123.jpg

Вы шутите? Посмотрите сообщение 8 где попросил и отобразил.

#15 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 05:01

Ещё раз:

SHADOW.png

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2015 - 05:15

.sectionblock-inner-content {
	 position: relative;
display: inline-block;
width: 100%;
padding:10px 0;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
background-image: url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center top;
background-image: url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center bottom;

}

замените на:
.sectionblock-inner-content {
	 position: relative;
display: inline-block;
width: 100%;
padding:10px 0;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

Далее найдите:
.sectionblock-inner-header {
background: #f9f9f9 url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top;
}

замените на:
.sectionblock-inner-header {
background: #f9f9f9 url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top, url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center bottom;
}


далее найдите:
.footer-inner-header {
border-bottom: 0px solid #D0D0D2;
}

замените на:
.footer-inner-header {
border-bottom: 0px solid #D0D0D2;
background: url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center top;
}
123.jpg

#17 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 05:25

Просмотр сообщенияVaccina (03 Декабрь 2015 - 05:15) писал:

.sectionblock-inner-content {
	 position: relative;
display: inline-block;
width: 100%;
padding:10px 0;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
background-image: url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center top;
background-image: url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center bottom;

}

замените на:
.sectionblock-inner-content {
	 position: relative;
display: inline-block;
width: 100%;
padding:10px 0;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

Далее найдите:
.sectionblock-inner-header {
background: #f9f9f9 url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top;
}

замените на:
.sectionblock-inner-header {
background: #f9f9f9 url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top, url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center bottom;
}


далее найдите:
.footer-inner-header {
border-bottom: 0px solid #D0D0D2;
}

замените на:
.footer-inner-header {
border-bottom: 0px solid #D0D0D2;
background: url('{ASSETS_IMAGES_PATH}Lower_shadow.png') no-repeat center top;
}
Прикрепленный файл 123.jpg

1. Верхушка поломалась...

А низ работает.

2. И как убрать лишнюю эту присоску-полоску, которой не было?
Kusok.png

#18 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2015 - 05:33

.sectionblock-inner-content {
		 position: relative;
display: inline-block;
width: 100%;
padding:10px 0;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

замените на:
.sectionblock-inner-content {
		 position: relative;
display: inline-block;
width: 100%;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

далее
.sectionblock-inner-header {
background: #f9f9f9 url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top, url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center bottom;
}

замените на:
.sectionblock-inner-header {
background: url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top, url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center bottom;
}


#19 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Декабрь 2015 - 05:41

Просмотр сообщенияVaccina (03 Декабрь 2015 - 05:33) писал:

.sectionblock-inner-content {
		 position: relative;
display: inline-block;
width: 100%;
padding:10px 0;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

замените на:
.sectionblock-inner-content {
		 position: relative;
display: inline-block;
width: 100%;
background-color: #FFF;
background-image: url(http://design.#.ru/bckg1.png);
background-repeat: repeat;
}

далее
.sectionblock-inner-header {
background: #f9f9f9 url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top, url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center bottom;
}

замените на:
.sectionblock-inner-header {
background: url('{ASSETS_IMAGES_PATH}gplay2.png') repeat scroll left top, url('{ASSETS_IMAGES_PATH}Upper_shadow.png') no-repeat center bottom;
}

А так нарушается прилипание верхнего и нижнего бэкграундов:
Narush.png
Появляется несостыковка.

#20 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2015 - 05:51

Если просмотреть сообщение #9, то увидим, что отступы у данного блока (padding) изначально отсутствовали, позже я просила их добавить и так как они теперь не нужны, то в последнем сообщении я удалила стиль.
Между меню и лого должен быть больший отступ? Можно изменить значение отступов в данном блоке стилей:
.logoblock-left {
	display: inline-block;
	float: left;
	border: 0px solid #FFF;
	margin-bottom: -5px;
	margin-top: 9px;
}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных