Чек Вместо Корзины
#21
Отправлено 25 Февраль 2014 - 22:47
И чтоб нельзя было на них нажимать, а то все равно так просто страница обновляется.
#22
Отправлено 26 Февраль 2014 - 06:35
Brend7111 (25 Февраль 2014 - 22:47) писал:
И чтоб нельзя было на них нажимать, а то все равно так просто страница обновляется.
Здравствуйте, редактируем код баннера
Нужно добавить тег title="title title", вместо title title написать свой текст, он будет отображаться при наведении
<div id="header-banner"> <a href=""><img src="{ASSETS_IMAGES_PATH}1.jpg" title="title title"></a> <a href=""><img src="{ASSETS_IMAGES_PATH}2.jpg" title="title title"></a> <a href=""><img src="{ASSETS_IMAGES_PATH}3.jpg" title="title title"></a> <a href=""><img src="{ASSETS_IMAGES_PATH}4.jpg" title="title title"></a> </div>
#23
Отправлено 26 Февраль 2014 - 10:12
#24
Отправлено 26 Февраль 2014 - 10:20
Brend7111 (26 Февраль 2014 - 10:12) писал:
Используйте такую структуру ссылок
<a href=""><img src="{ASSETS_IMAGES_PATH}1.jpg" onmouseover="this.src='{ASSETS_IMAGES_PATH}2.jpg';" onmouseout="this.src='{ASSETS_IMAGES_PATH}1.jpg';"/></a>
#26
Отправлено 26 Февраль 2014 - 10:48
Brend7111 (26 Февраль 2014 - 10:33) писал:
Да, для этого выполните инструкцию
Загрузите файл demo.css и modernizr.custom.34807.js
Подключаем их в шаблоне HTML
<script src="{ASSETS_JS_PATH}modernizr.custom.34807.js" ></script> <link href="{ASSETS_STYLES_PATH}demo.css" rel="stylesheet" />
Далее находим
<div id="header-banner"> <a href=""><img src="{ASSETS_IMAGES_PATH}1.jpg" title="title title"></a> <a href=""><img src="{ASSETS_IMAGES_PATH}2.jpg" title="title title"></a> <a href=""><img src="{ASSETS_IMAGES_PATH}3.jpg" title="title title"></a> <a href=""><img src="{ASSETS_IMAGES_PATH}4.jpg" title="title title"></a> </div>
Заменяем на
<div id="header-banner"> <div id="container"> <h1>Использование CSS3 свойства 3D TRANSFORM</h1> <div class="wrapper"> <div class="item"> <img src="{ASSETS_IMAGES_PATH}1.png" /> <span class="information"> <strong>PCVECTOR.NET</strong> Скрипты для ваших сайтов. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="{ASSETS_IMAGES_PATH}2.png" /> <span class="information"> <strong>PCVECTOR.RU</strong> Форум твоего направления. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="{ASSETS_IMAGES_PATH}3.png" /> <span class="information"> <strong>PCVECTOR в ТВИТТЕРЕ</strong> Подписывайтесь на нас в twitter. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="{ASSETS_IMAGES_PATH}4.png" /> <span class="information"> <strong>RSS PCVECTOR</strong> Читайте нашу RSS ленту. </span> </div> </div> </div> </div>
<img src="{ASSETS_IMAGES_PATH}4.png" /> ссылка на картинку
<strong>RSS PCVECTOR</strong> Читайте нашу RSS ленту. текст при повороте
Фон поворотной части редактируем в demo.css
.item .information { display: block; position: absolute; top: 0; height: 80px; width: 290px; text-align: left; border-radius: 15px; padding: 10px; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); box-shadow: none; background: rgb(236,241,244); background: -moz-linear-gradient(top, rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1))); background: -webkit-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -o-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -ms-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 ); -webkit-transform: rotateX(-90deg) translateZ(50px); -moz-transform: rotateX(-90deg) translateZ(50px); -ms-transform: rotateX(-90deg) translateZ(50px); -o-transform: rotateX(-90deg) translateZ(50px); transform: rotateX(-90deg) translateZ(50px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
#27
Отправлено 26 Февраль 2014 - 11:05
<div class="wrapper"> <div class="item"> <img src="images/1.png" /> <span class="information"> <strong>PCVECTOR.NET</strong> Скрипты для ваших сайтов. </span> </div> </div>
Эти в style.css?
.wrapper { display: inline-block; width: 310px; height: 100px; vertical-align: top; margin: 1em 1.5em 2em 0; cursor: pointer; position: relative; font-family: Tahoma, Arial; perspective: 4000px; } .item { height: 100px; transform-style: preserve-3d; transition: transform .6s; }
.item img { display: block; position: absolute; top: 0; border-radius: 3px; box-shadow: 0px 3px 8px rgba(0,0,0,0.3); transform: translateZ(50px); transition: all .6s; } .item .information { display: block; position: absolute; top: 0; height: 80px; width: 290px; text-align: left; border-radius: 15px; padding: 10px; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); box-shadow: none; background: linear-gradient(top,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); transform: rotateX(-90deg) translateZ(50px); transition: all .6s; }
.item:hover { transform: translateZ(-50px) rotateX(95deg); } .item:hover img { box-shadow: none; border-radius: 15px; } .item:hover .information { box-shadow: 0px 3px 8px rgba(0,0,0,0.3); border-radius: 3px; }
Если Вам не сложно, распишите пожалуйста для чайников, я вообще не понимаю ничего в этих кодах.
#28
Отправлено 26 Февраль 2014 - 19:19
Brend7111 (26 Февраль 2014 - 11:05) писал:
<div class="wrapper"> <div class="item"> <img src="images/1.png" /> <span class="information"> <strong>PCVECTOR.NET</strong> Скрипты для ваших сайтов. </span> </div> </div>
Эти в style.css?
.wrapper { display: inline-block; width: 310px; height: 100px; vertical-align: top; margin: 1em 1.5em 2em 0; cursor: pointer; position: relative; font-family: Tahoma, Arial; perspective: 4000px; } .item { height: 100px; transform-style: preserve-3d; transition: transform .6s; }
.item img { display: block; position: absolute; top: 0; border-radius: 3px; box-shadow: 0px 3px 8px rgba(0,0,0,0.3); transform: translateZ(50px); transition: all .6s; } .item .information { display: block; position: absolute; top: 0; height: 80px; width: 290px; text-align: left; border-radius: 15px; padding: 10px; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); box-shadow: none; background: linear-gradient(top,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); transform: rotateX(-90deg) translateZ(50px); transition: all .6s; }
.item:hover { transform: translateZ(-50px) rotateX(95deg); } .item:hover img { box-shadow: none; border-radius: 15px; } .item:hover .information { box-shadow: 0px 3px 8px rgba(0,0,0,0.3); border-radius: 3px; }
Если Вам не сложно, распишите пожалуйста для чайников, я вообще не понимаю ничего в этих кодах.
Скачайте архив из инструкции, в нем вы обнаружите несколько файлов.
Загрузите файл demo.css и modernizr.custom.34807.js на ваш сайт через Редактор Шаблонов - Добавить файлы.
Далее выполняйте инструкцию написанную в данном сообщении
#29
Отправлено 26 Февраль 2014 - 22:12
#30
Отправлено 26 Февраль 2014 - 22:26
Brend7111 (26 Февраль 2014 - 22:12) писал:
Вы все верно сделали, съехало из-за того что данные блоки не помешаются в вашей шапке, их необходимо сократить до двух и уменьшит в размерах.
Чтобы это сделать вам необходимо загрузить ваши изображения c названиями 1.png 2.png
#31
Отправлено 27 Февраль 2014 - 08:53
#32
Отправлено 27 Февраль 2014 - 10:44
Brendi (27 Февраль 2014 - 08:53) писал:
Отмените все последние изменения связанные с добавление данного блока, мы напишем вам новую инструкцию для вашего сайта
#33
Отправлено 27 Февраль 2014 - 11:54
#36
Отправлено 28 Февраль 2014 - 10:41
#37
Отправлено 28 Февраль 2014 - 21:25
Brendi (28 Февраль 2014 - 10:41) писал:
#38
Отправлено 01 Март 2014 - 09:10
Еще корзина теперь не обновляется, пока страницу не обновишь, когда добавляешь товар, и со страницы товара, и с категории.
#39
Отправлено 01 Март 2014 - 09:21
.wrapper1 { display: inline-block; width: 120px; height: 120px; vertical-align: top; margin: 1em 1.5em 2em 0; cursor: pointer; position: relative; font-family: Tahoma, Arial; -webkit-perspective: 4000px; -moz-perspective: 4000px; -ms-perspective: 4000px; -o-perspective: 4000px; perspective: 4000px; }и замените его на
.wrapper1 { display: inline-block; width: 120px; height: 120px; vertical-align: top; margin: 1em 0.5em 2em 0; cursor: pointer; position: relative; font-family: Tahoma, Arial; -webkit-perspective: 4000px; -moz-perspective: 4000px; -ms-perspective: 4000px; -o-perspective: 4000px; perspective: 4000px; }
В том же файле найдите блок
#container1 { display: block; margin: 0 auto; width: 700px; }и замените его на
#container1 { display: block; /* margin: 0 auto; */ width: 700px; margin-left: 17%; }
#40
Отправлено 01 Март 2014 - 09:55
И корзина теперь не обновляется, пока страницу не обновишь, когда добавляешь товар, и со страницы товара, и с категории.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных