Неровная Тень Сверху И Снизу Центрального Белого Блока
#1
Отправлено 02 Декабрь 2015 - 13:57
Помогите пожалуйста настроить тень сверху и снизу белого блока:
Чтобы она отображалась и в товаре и везде по всем-всем страницам и не ползала влево-вправо. И чтобы не появлялась в адаптивном шаблоне.
Внизу по аналогии как вверху.
Как вот здесь:
Только чтоб правее как на рисунке, а не по-середине.
#2
Отправлено 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
Отправлено 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
Отправлено 02 Декабрь 2015 - 16:59
Andrew S. (02 Декабрь 2015 - 16:42) писал:
И чтобы она была не внутрь, а наружу, как на рисунке 1.
#5
Отправлено 02 Декабрь 2015 - 18:00
Alekseys (02 Декабрь 2015 - 16:59) писал:
А можно поверх этого фона добавить ещё один фон? Чтобы не смешивать их в редакторе. Чтобы отдельными файлами были.
#6
Отправлено 03 Декабрь 2015 - 01:20
.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; }
Результат должен быть следующим
#7
Отправлено 03 Декабрь 2015 - 02:52
Vaccina (03 Декабрь 2015 - 01:20) писал:
.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
И зачем мне прямая тень, я же написал, что мне не нужна прямая тень.
#9
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 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; }
И кусок какой-то лишний добавился ненужный
Я код подправил, основной фон в товаре восстановился, но тени не отображаются и везде добавились эти лишние куски вверху и внизу.
#13
Отправлено 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%; }
результат:
#14
Отправлено 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 где попросил и отобразил.
#16
Отправлено 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; }
#17
Отправлено 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. И как убрать лишнюю эту присоску-полоску, которой не было?
#18
Отправлено 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
Отправлено 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; }
А так нарушается прилипание верхнего и нижнего бэкграундов:
Появляется несостыковка.
#20
Отправлено 03 Декабрь 2015 - 05:51
Между меню и лого должен быть больший отступ? Можно изменить значение отступов в данном блоке стилей:
.logoblock-left { display: inline-block; float: left; border: 0px solid #FFF; margin-bottom: -5px; margin-top: 9px; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных