<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать анимированный фон на странице

Как сделать анимированный фон на странице

Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице. При этом человек знал и про background, и про CSS. Он у меня попросил скрипт на JavaScript, позволяющий делать анимацию фона. Я ему сказал, что здесь JavaScript совсем не нужен. И показал ему, как можно сделать анимированный фон только с применением CSS. Вот об этом способе я и напишу в данной статье.

Способ совершенно тривиальный и простой, думаю, что многие до него додумаются сразу. Вот CSS-код:

html {
  background: url(images/bg.gif) no-repeat; /* Задаём фон GIF-картинкой */
  height: 100%; /* 100% высота страницы */
}

Ключевым моментом здесь является GIF-изображение. Думаю, что Вам известно, что в GIF можно делать достаточно сложную анимацию (в рамках целесообразности, конечно). Поэтому никаких скриптов не нужно, чтобы сделать любой фон, а не только страницы, анимированным.

Таким образом, достаточно создать анимированный GIF, вставить его на страницу самым простым CSS-кодом, и у Вас получится анимированный фон на странице.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (19):

ken15 ken15 17.05.2012 10:37:03

Совсем просто интересно зачем задавали такой вопрос

Ответить

idxdoc idxdoc 27.05.2012 14:23:48

Не нашел где спросить, спрошу тут) У меня есть сайт свой, могу показать если попросите, так вот, когда я его открываю через телефон (iphone), то он открывает его не весь, а часть где-то 80%, когда все остальные сайты открываются на 100% такая же фигня и в яндекс баре (закладки) там окошки с сайтами, так же на окошке этом сайт виден на 80% а все остальные вмещает на 100%. Сравнивал CSS коды, разницы существенной не заметил, Помогите пожалуйста) Как то туфтово все описал, думаю Вы поймете)

Ответить

Admin Admin 27.05.2012 18:34:18

Дело в вёрстке, точнее в её низком качестве. Ничего сказать невозможно, кроме как посоветовать научиться хорошо верстать и всё сделать заново. Вот курс по вёрстке: http://srs.myrusakov.ru/makeup

Ответить

lev_100rus lev_100rus 12.07.2012 18:28:46

Михаил! Помогите! У меня на сайте есть шапка и на шапке кнопки! Если смотреть на сайте при масштабе 100% то всё нормально, но если смотреть на 50% или 200% и т.п. Шапка и кнопки сдвигаются! А на вашем сайте только масштаб уменьшается, а кнопки остаются на местах! Как вы это сделалил напишите пожалуйста!!!

Ответить

Admin Admin 12.07.2012 19:45:17

Используйте относительные размеры (то есть проценты), тогда они будут изменяться в зависимости от масштаба.

Ответить

lev_100rus lev_100rus 12.07.2012 19:56:25

Я пробовал! Но если я ставлю width = 100%; То у меня появляются отступы слева и справо! Тоже самое и с высотой! Что делать?

Ответить

Admin Admin 12.07.2012 20:01:01

Отступы слева и справа - это margin (или padding). Вряд ли они у изображения, возможно, они у body. Поэтому поставьте у body {margin: 0; padding: 0;}

Ответить

lev_100rus lev_100rus 12.07.2012 20:12:09

У меня шапка залита в <head>!!! Поставить это в head??? Или перенести шапку в body?

Ответить

Admin Admin 12.07.2012 20:38:55

В <head> вообще не должно быть контента. Весь контент в <body>.

Ответить

lev_100rus lev_100rus 12.07.2012 20:48:07

перенесу шапку в body и сделаю как вы писали! Спасибо

Ответить

lev_100rus lev_100rus 13.07.2012 15:54:47

Шапку сделал как вы сказали! Всё нормально! А вот у меня прямо на шапке есть кнопки навигации! Как с ними быть? Потому что если я меняю масштаб то шапка остаётся как было, а кнопки сдвигаются кто куда! Попробовал расставить кнопки на шапке с помощью % , а не px! Но это не помогло!

Ответить

Admin Admin 13.07.2012 16:11:46

Значит проблема в Вашей верстке. Что именно происходит с кнопками?

Ответить

lev_100rus lev_100rus 13.07.2012 16:43:41

У меня сделаны анимированные кнопки по вашему уроку http://myrusakov.ru/css-hover-image.html Ну вот когда я меняю масштаб в браузере то кнопки(которые сделаны на картинке-шапке) Начинают "Прыгать"! Сбивается их положение! Если они были до этого на шапке то они выходят за её пределы и т.п.

Ответить

Admin Admin 13.07.2012 17:11:42

Они так и должны прыгать. Иначе придется ставить фиксированное position. Задавать left, top и так далее.

Ответить

lev_100rus lev_100rus 13.07.2012 17:26:17

У меня стоит left и top Только фиксированное position не стоит! Как это правильно сделать? Вот код css кнопки: .sovety { background = url("image/buttons/sovety.jpg") no repeat; height = 50px; width = 150px; margin top = 111px; position: absolute; left: -10px; } .sovety:hover { background = url("image/buttons/sovety1.jpg") no repeat; height = 50px; width = 150px; }

Ответить

Admin Admin 13.07.2012 17:39:26

Нужно position: absolute; и свойства left, top, right и bottom. И ещё margin-top, а не margin top.

Ответить

lev_100rus lev_100rus 13.07.2012 18:13:05

Всё равно что-то не получается!:( вот код: .but { top: 220px; position: absolute; right:100px; bottom:290px; left: 500px; } И тем не менее они всё равно смещаются

Ответить

lev_100rus lev_100rus 13.07.2012 22:24:15

Всё! Вроде разобрался! Заместо position: absolute ПОСТАВИЛ: position: static (что в прочем и так по умолчанию стоит!) И всё стало норм!:)

Ответить

vitalik20102010@meta.ua vitalik20102010@meta.ua 28.03.2015 19:52:41

У меня почему-то не получилось задать фон таким способом.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.