Как Сделать Прозрачность (Как-Будто На Стекле)
#1
Отправлено 22 Декабрь 2012 - 02:29
http://инфэшн.рф/
Полностью окантовка всей станицы. И по краям этой таблицы (окантовки, обрамления как назвать) виден даже эффект преломления.
Вижу что она целостная и больше стандартной, через что сделать подобное? На каком нить примере покажите плз.
P.S. Дизайн копировать не собираюсь, плюс направление у меня совсем другое.
#2
Отправлено 22 Декабрь 2012 - 04:49
#container { margin: 0 auto; max-width: 1000px; width: 1000px; }
и заменить на
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; }
далее вам понадобиться задать общий фон. Это вы можете сделать в классе
#backtop { background: url("/web/upload/assets/images/145/144230/bgout.jpg") repeat scroll center bottom transparent; }
вам необходимо или изменить изображение "bgout.jpg" в разделе редактора тем, или же прописать в данном классе другое изображение.
Возможно вам так же понадобиться убрать белый фон у общего контента. Это может сделать в классе
#cntrobj { background: url("/web/upload/assets/images/145/144230/conteiner-bg-y.jpg") repeat-y scroll 0 0 transparent; }
просто заменив его на
#cntrobj { background: transparent; }
#3
Отправлено 22 Декабрь 2012 - 09:42
#4
Отправлено 22 Декабрь 2012 - 12:15
А где увеличить ширину этого самого прозрачного поля, чтобы края были не в притык к левой и правой стороне контента, а чуть больше? Как на том же инфэшн?
Цитата
Подскажите какой класс ковырять? где выставить center, если надо?
#5
Отправлено 22 Декабрь 2012 - 12:35
odissei (22 Декабрь 2012 - 12:15) писал:
А где увеличить ширину этого самого прозрачного поля, чтобы края были не в притык к левой и правой стороне контента, а чуть больше? Как на том же инфэшн?
Пробовал тут менять, увеличивать. Тогда все ломается: левая граница прижимается, а с права появляется место.
Подскажите какой класс ковырять? где выставить center, если надо?
Меняйте размер именно параметров, выделенных красным цветом. Контент будет прижиматься вправо потому, что у него по умолчанию стоит параметр по правому краю. Скажите какой размер этого полупрозрачного фона Вам нужны и мы напишем Вам код для вставки в стили
#6
Отправлено 22 Декабрь 2012 - 12:38
odissei (22 Декабрь 2012 - 12:15) писал:
А где увеличить ширину этого самого прозрачного поля, чтобы края были не в притык к левой и правой стороне контента, а чуть больше? Как на том же инфэшн?
Пробовал тут менять, увеличивать. Тогда все ломается: левая граница прижимается, а с права появляется место.
Подскажите какой класс ковырять? где выставить center, если надо?
Замените код :
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; }на этот:
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; padding-left: 10px; padding-right: 10px; }
#7
Отправлено 23 Декабрь 2012 - 01:59
miyako, спс, то что надо.
И надеюсь последний вопрос по этой теме:
Как сделать чтобы эта "окантовка стеклянная" еще и подвал захватила? Т.е. у подавала фон также оставляем, но добавляется эффект преломления, и низ этого "стекла" чтобы был с округленными краями и проходил под футером - как на том же инфэшн. И второй вариант, тут же, что бы это "стекло" шло вниз до конца сайта - в этом случае скругленные углы не нужны.
1 вариант:
2 вариант:
#8
Отправлено 24 Декабрь 2012 - 07:16
odissei (23 Декабрь 2012 - 01:59) писал:
miyako, спс, то что надо.
И надеюсь последний вопрос по этой теме:
Как сделать чтобы эта "окантовка стеклянная" еще и подвал захватила? Т.е. у подавала фон также оставляем, но добавляется эффект преломления, и низ этого "стекла" чтобы был с округленными краями и проходил под футером - как на том же инфэшн. И второй вариант, тут же, что бы это "стекло" шло вниз до конца сайта - в этом случае скругленные углы не нужны.
1 вариант:
Без-имени-1.jpg
2 вариант:
Без-имени-2.jpg
Если вы хотите оставить фон на footer то можно в файл main.csstemplate добавить следующий код.
#footer { background:#485d63; color:white; border-top:4px solid #64828b; margin:20px 0 17px 0; border-radius: 0px 0px 10px 10px; } #footer #main .menufooter ul li a { color:white; }
#9
Отправлено 24 Декабрь 2012 - 08:21
Цитата
Если вы хотите оставить фон на footer то можно в файл main.csstemplate добавить следующий код.
На нем надо сделать. Вопрос актуален.
А инфэшн (где как раз все работает) - это я для примера приводил.
Помогите плиз с этими двумя вариантами, два разных кода.
#10
Отправлено 24 Декабрь 2012 - 11:16
Решение ведь не сложное полагаю (ведь есть образец).
Еще раз вопрос:
Помогите пожалуйста кодом, для двух вариантов указанных в сообщении
http://forum.storela...кле/#entry36240
Заранее спасибо.
#11
Отправлено 24 Декабрь 2012 - 12:14
odissei (24 Декабрь 2012 - 11:16) писал:
Решение ведь не сложное полагаю (ведь есть образец).
Еще раз вопрос:
Помогите пожалуйста кодом, для двух вариантов указанных в сообщении
http://forum.storela...кле/#entry36240
Заранее спасибо.
Найти код:
#bottobj { background:url({ASSETS_IMAGES_PATH}conteiner-bg.png) 0 -11px no-repeat; width:1000px; height:11px; margin:0 auto; }Заменить:
#bottobj {width:1000px; height:11px; margin:0 auto; }В файле HTML.
Найти и удалить код:
<!-- Подвал --> <div id="footer"> <div id="main"> <div class="menufooter"> <ul> {% FOR menu %} {% FOR footer %} {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <div class="copyring"> <p>© {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p> </div> </div> </div> <!-- Подвал-Конец -->Найти код:
{% IF news_list_articles.SHOW_TIME %} <div class="statedate fnt12 fnt11n txtalgnlft"> {news_list_articles.TIME | date("d.m.Y")} </div> {% ENDIF %} </div> {% ENDFOR %} </div> <div class="blockbottom"></div> </div> {% ENDIF %} <!-- END Если есть список статей и если в тарифном плане подключен модуль новостей --> {% ENDIF %} </div>
И вставить после:
<!-- Подвал --> <div id="footer"> <div id="main"> <div class="menufooter"> <ul> {% FOR menu %} {% FOR footer %} {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <div class="copyring"> <p>© {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p> </div> </div> </div> <!-- Подвал-Конец -->
Для добавления эффекта закругления углов.
В файле main.csstemplate.
Найти код:
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; padding-left: 15px; padding-right: 15px; }Заменить:
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; padding-left: 15px; padding-right: 15px; border-radius: 10px; }
#12
Отправлено 24 Декабрь 2012 - 12:27
Что не так?
#13
Отправлено 24 Декабрь 2012 - 14:21
#14
Отправлено 25 Декабрь 2012 - 02:04
По порядку:
1.Делаю изменения в стилях, приведенные в посте (или посту ) № 11 даннной темы.
Тут все просто и ясно.
2. По коду HTML начинается путанится у меня:
2.1. Найти и удалить код:
<!-- Подвал --> <div id="footer"> <div id="main"> <div class="menufooter"> <ul> {% FOR menu %} {% FOR footer %} {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <div class="copyring"> <p>© {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p> </div> </div> </div> <!-- Подвал-Конец -->
Здесь надо удалить код подвала.
А ниже, надо вставить код (другой) после кода подвала.
Если удалить код подвала, то подвал просто исчезнет.
Потому я решил что конечный код, должен соответствовать вашим скриншотам (рисункам) кода (именно последнему):
Получается по тому рисунку надо было сделать так:
Найти следующий код, и вставить его после подвала:
<div class="clear"></div> </div> </div> <div id="bottobj"></div>
В итоге мы имеем следующий код:
{% IF news_list_articles.SHOW_TIME %} <div class="statedate fnt12 fnt11n txtalgnlft"> {news_list_articles.TIME | date("d.m.Y")} </div> {% ENDIF %} </div> {% ENDFOR %} </div> <div class="blockbottom"></div> </div> {% ENDIF %} <!-- END Если есть список статей и если в тарифном плане подключен модуль новостей --> {% ENDIF %} </div> <!-- Подвал --> <div id="footer"> <div id="main"> <div class="menufooter"> <ul> {% FOR menu %} {% FOR footer %} {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <div class="copyring"> <p>© {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p> </div> </div> </div> <!-- Подвал-Конец --> <div class="clear"></div> </div> </div> <div id="bottobj"></div>
Который соответствует коду, который приведен на вашем последнем скриншоте.
Получилось вот так:
Я со страницы убрал все, чтобы она в один скрин влезла.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
В принципе это соответствует 1му варинту из сообщения №7 данной темы. Но не много не то (там я рисовал что стекло проходит под футером, а не как окантовка только по бокам). (возможно код представить как это сделать, пример все тот же инфэшн.рф)
Если немного изменить, то это будет соответствовать варианту 2 из 7 поста. Только надо чтобы оконтовка из стекла по бокам, была на протяжении всей страницы (т.е. начало с самого вверха, как и есть счас, и заканчивалась в самом низу страници, ниже футера). Если это довольно трудно (громоздить всякой фигни придется) то можно сделать, опять же, как на том эе инфэшн.рф, - стекло начинается к верхнему краю впритык, а внизу заканчивается под футером, немного не доходя нижнего края страницы. Важное условие: под футером все должно быть под стеклом (не только бока).
Для наглядности привожу скриншоты:
1. Надо чтобы было вот так:
Оно же, с вашего поста:
2. Или, хотя бы, вот так:
Ресурс : bel-mag.ru
Еще раз спасибо за помощь, большое.
Надеюсь не сильно одолел уже)
#15
Отправлено 25 Декабрь 2012 - 07:18
odissei (25 Декабрь 2012 - 02:04) писал:
По порядку:
1.Делаю изменения в стилях, приведенные в посте (или посту ) № 11 даннной темы.
Тут все просто и ясно.
2. По коду HTML начинается путанится у меня:
2.1. Найти и удалить код:
<!-- Подвал --> <div id="footer"> <div id="main"> <div class="menufooter"> <ul> {% FOR menu %} {% FOR footer %} {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <div class="copyring"> <p>© {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p> </div> </div> </div> <!-- Подвал-Конец -->
Здесь надо удалить код подвала.
А ниже, надо вставить код (другой) после кода подвала.
Если удалить код подвала, то подвал просто исчезнет.
Потому я решил что конечный код, должен соответствовать вашим скриншотам (рисункам) кода (именно последнему):
Получается по тому рисунку надо было сделать так:
Найти следующий код, и вставить его после подвала:
<div class="clear"></div> </div> </div> <div id="bottobj"></div>
В итоге мы имеем следующий код:
{% IF news_list_articles.SHOW_TIME %} <div class="statedate fnt12 fnt11n txtalgnlft"> {news_list_articles.TIME | date("d.m.Y")} </div> {% ENDIF %} </div> {% ENDFOR %} </div> <div class="blockbottom"></div> </div> {% ENDIF %} <!-- END Если есть список статей и если в тарифном плане подключен модуль новостей --> {% ENDIF %} </div> <!-- Подвал --> <div id="footer"> <div id="main"> <div class="menufooter"> <ul> {% FOR menu %} {% FOR footer %} {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <div class="copyring"> <p>© {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p> </div> </div> </div> <!-- Подвал-Конец --> <div class="clear"></div> </div> </div> <div id="bottobj"></div>
Который соответствует коду, который приведен на вашем последнем скриншоте.
Получилось вот так: 1.jpg
Я со страницы убрал все, чтобы она в один скрин влезла.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
В принципе это соответствует 1му варинту из сообщения №7 данной темы. Но не много не то (там я рисовал что стекло проходит под футером, а не как окантовка только по бокам). (возможно код представить как это сделать, пример все тот же инфэшн.рф)
Если немного изменить, то это будет соответствовать варианту 2 из 7 поста. Только надо чтобы оконтовка из стекла по бокам, была на протяжении всей страницы (т.е. начало с самого вверха, как и есть счас, и заканчивалась в самом низу страници, ниже футера). Если это довольно трудно (громоздить всякой фигни придется) то можно сделать, опять же, как на том эе инфэшн.рф, - стекло начинается к верхнему краю впритык, а внизу заканчивается под футером, немного не доходя нижнего края страницы. Важное условие: под футером все должно быть под стеклом (не только бока).
Для наглядности привожу скриншоты:
1. Надо чтобы было вот так:
3.jpg
Оно же, с вашего поста:
4.png
2. Или, хотя бы, вот так:
2.jpg
Ресурс : bel-mag.ru
Еще раз спасибо за помощь, большое.
Надеюсь не сильно одолел уже)
В панели управления магазином, в разделе "Сайт" > "Редактор тем" в блоке "Стили и скрипты" находим файл main.csstemplate, открываем его и вставляем следующий код:
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; padding-left: 15px; padding-right: 15px; border-radius: 10px; }И замените его на:
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; padding-left: 15px; padding-right: 15px; border-radius: 10px; height:100%; }
#16
Отправлено 25 Декабрь 2012 - 08:12
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; padding-left: 15px; padding-right: 15px; border-radius: 10px; height:100%; }----
Сделал так, чет ничего не меняется?
Несколько раз пробовал ( к примеру скругление углов убираем или ставим обратно - все изменения видно). А height:100% как-то не проявляет себя совсем.
В чем проблема может быть?
#17
Отправлено 25 Декабрь 2012 - 08:30
odissei (25 Декабрь 2012 - 08:12) писал:
#container { background-color: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); margin: 0 auto; max-width: 1000px; width: 1000px; padding-left: 15px; padding-right: 15px; border-radius: 10px; height:100%; }----
Сделал так, чет ничего не меняется?
Несколько раз пробовал ( к примеру скругление углов убираем или ставим обратно - все изменения видно). А height:100% как-то не проявляет себя совсем.
В чем проблема может быть?
Сейчас на ваш сайт выглядит так, как на приведенном ниже скриншоте.
Что конкретно вы хотите изменить?
#18
Отправлено 25 Декабрь 2012 - 09:00
Но это не так.
Плюс я упустил возможную проблему отображения в разных браузерах.
Привожу скриншоты отображения в браузерах:
1. Opera v.10.00:
2. Firefox v.17.0.1:
3. Internet Explorer v. 9.0:
Собсно в опере еще куда не шло, в ФФ и ИЕ неудовлетворительно.
Хром не установлен, но хоть радует что в хроме все неплохо.
Вот об этом я и говорю.
Как решить проблему?
#19
Отправлено 25 Декабрь 2012 - 10:01
Почувствовал себя днищем))
Вот код:
Цитата
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
padding:0px 15px 20px;
border-radius: 15px;
}
Спасибо за помощь всем.
#20
Отправлено 25 Декабрь 2012 - 10:17
odissei (25 Декабрь 2012 - 09:00) писал:
Но это не так.
Плюс я упустил возможную проблему отображения в разных браузерах.
Привожу скриншоты отображения в браузерах:
1. Opera v.10.00:
opera.jpg
2. Firefox v.17.0.1:
ff.jpg
3. Internet Explorer v. 9.0:
ie.jpg
Собсно в опере еще куда не шло, в ФФ и ИЕ неудовлетворительно.
Хром не установлен, но хоть радует что в хроме все неплохо.
Вот об этом я и говорю.
Как решить проблему?
Для решения проблемы в Ie в Редакторе тем в шаблоне HTML перед строкой вставьте следующий код:
<!--[if lt IE 9]> <style type="text/css"> #container { background-color: #F7FBFF; /*подберите нужный вам цвет*/ filter: alpha(Opacity=70); /* Прозрачность в IE */ } </style> <![endif]-->
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных