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


Чек Вместо Корзины


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

#21 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 25 Февраль 2014 - 22:47

Большое спасибо! А можно сделать так, чтобы при наведении на них курсором чтобы появлялись картинки с текстом? Вообще было бы очень здорово сделать это с эффектом поворота кубика, при наведении он поворачивается в какую-нибудь сторону и высвечивается др. картинка, видела на каком-то сайте, но не помню на каком.
И чтоб нельзя было на них нажимать, а то все равно так просто страница обновляется.

#22 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 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 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 26 Февраль 2014 - 10:12

Вы меня не поняли.Чтоб вообще другая картинка вместо той, на которую наводишь, отображалась, а не просто текст.

#24 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 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>


#25 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 26 Февраль 2014 - 10:33

А вот так реально вообще сделать?

#26 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 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 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 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 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 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 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 26 Февраль 2014 - 22:12

Все съехало, что не так сделала?

#30 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 26 Февраль 2014 - 22:26

Просмотр сообщенияBrend7111 (26 Февраль 2014 - 22:12) писал:

Все съехало, что не так сделала?

Вы все верно сделали, съехало из-за того что данные блоки не помешаются в вашей шапке, их необходимо сократить до двух и уменьшит в размерах.
Чтобы это сделать вам необходимо загрузить ваши изображения c названиями 1.png 2.png

#31 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 27 Февраль 2014 - 08:53

Как теперь их уменьшить? Еще у меня после всех этих действий пропали картинки хитов продаж, сместился каталог, а недавно просмотренные почему-то тоже стали кубиком крутиться.

#32 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 27 Февраль 2014 - 10:44

Просмотр сообщенияBrendi (27 Февраль 2014 - 08:53) писал:

Как теперь их уменьшить? Еще у меня после всех этих действий пропали картинки хитов продаж, сместился каталог, а недавно просмотренные почему-то тоже стали кубиком крутиться.

Отмените все последние изменения связанные с добавление данного блока, мы напишем вам новую инструкцию для вашего сайта

#33 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 27 Февраль 2014 - 11:54

Отменила.

#34 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 27 Февраль 2014 - 20:30

Просмотр сообщенияBrendi (27 Февраль 2014 - 11:54) писал:

Отменила.

Внес изменения на ваш сайт, это самый оптимальный вариант по размерам данного блока, изменение размеров изображения могут повлиять на отображение сайта.

#35 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 28 Февраль 2014 - 10:22

Ой, спасибо вам большое!

Помогите, пожалуйста еще выровнять фото недавних товаров, меню, контакты и каталог.

123.jpg
123.png

#36 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 28 Февраль 2014 - 10:41

И вообще и в каталоге, и в карточке товара теперь все почему-то по центру.

#37 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 28 Февраль 2014 - 21:25

Просмотр сообщенияBrendi (28 Февраль 2014 - 10:41) писал:

И вообще и в каталоге, и в карточке товара теперь все почему-то по центру.
Здравствуйте. Проверьте сейчас, пожалуйста, сайт, все ли нормально отображаются. Мы внесли некоторые изменения в шаблон style.css и demo.css (убрали выравнивание по центру, излишние отступы слева, вставляемые браузером и изменения отступов сверху у некоторых элементов.).

#38 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 01 Март 2014 - 09:10

Все отлично, только можно ли сделать расстояние между кубиками меньше и переместить их правее? И размер шрифта контактов где поменять? У меня вот так сейчас отображается.

Безымянный.png

Еще корзина теперь не обновляется, пока страницу не обновишь, когда добавляешь товар, и со страницы товара, и с категории.

#39 Stasya

Stasya

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

  • Модераторы
  • 4 007 сообщений

Отправлено 01 Март 2014 - 09:21

В файле demo.css найдите блок
.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 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 01 Март 2014 - 09:55

Спасибо, а размер шрифта контактов где поменять?
И корзина теперь не обновляется, пока страницу не обновишь, когда добавляешь товар, и со страницы товара, и с категории.




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

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